Sass笔记补充

sass中常用的mixin封装

网站整体居中

@mixin site-center($width: 960px) {
  width: $width;
  margin: 0 auto;
}

clearfix清除浮动

@mixin clearfix() {
  &before,
  &after {
    content: '';
    display: table;
  }
}

圆角边框

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

浏览器前缀

@mixin css3($property, $value) {
        @each $prefix in -webkit-,
        -moz-,
        -ms-,
        -o-,
        '' {
            #{$prefix}#{$property}: $value;
        }
    }

动画keyframes生成

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

文本溢出用...显示

@mixin text-ellipsis () {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性

纯css实现三角形

/* 箭头
arrow(direction, size, color);
*/
@mixin arrow($direction, $size, $color) {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: $size;
    cursor: pointer;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}

媒体查询

@mixin screen($min,$max){
    @media screen and (min-width:$min) and (max-width: $max){
        @content; //@content代表内容是自定义的
    }
}
@mixin min-screen($width){
    @media screen and (min-width: $width){
        @content;
    }
}
@mixin max-screen($width){
    @media screen and (max-width: $width){
        @content;
    }
}

Sass中的mixin和%placeholder的本质区别

mixin基本用法

@mixin box($width: 100px, $height: 100px) {
  width: $width;
  height: $height;
  box-shadow: 0 0 5px black;
  margin: 10px;
}

.smallBox {
  @include box(100px, 100px);
}
.bigBox {
  @include box(200px, 200px);
}
编译后的代码：
.smallBox {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 5px black;
  margin: 10px;
}
.bigBox {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 5px black;
  margin: 10px;
}

可以看到，Mixin不过是将代码复制了一块

%placeholder的基本用法

%placeholder 与 Mixin 差不多，但是不能传入参数。而且他不是直接复制代码块，而是将共有的属性提到前面，然后使用这两个 div 的选择器一起去调用。

%box {
  box-shadow: 0px 0px 5px black;
  margin: 10px;
}

.smallBox {
  @extend %box;
  width: 100px;
  height: 100px;
}
.bigBox {
  @extend %box;
  width: 200px;
  height: 200px;
}
编译后的代码：
.smallBox, .bigBox {
  box-shadow: 0px 0px 5px black;
  margin: 10px;
}
.smallBox {
  width: 100px;
  height: 100px;
}
.bigBox {
  width: 200px;
  height: 200px;
}

总结

我们会发现，在编译后，%placeholder会帮我们把重复引用的代码进行合并，但是使用mixin的时候并不会，并且，不能%placeholder不能传递参数，只能定义一段重复的代码段，而mixin可以传参数，封装一些需要传参数的代码

利用placeholder进行性能优化

通过上面的比较，我们可以知道，利用%placeholder能将重复代码合并的特性，将现有的css重复样式抽离出来，根据代码的块的不同拆分成多个不同的%placeholder

大型项目的sass目录该如何组织

通过搜索相关资料，总结出以下几个构建文件的目录以及其详情:

Base

base/ 文件夹包含了项目中一些相关的基础样式，比如normalize.css和一些关于文本排版方面的

Helpers

helpers/文件夹（或utils/）主要包含了项目中关于Sass的工具和帮助之类。在里面放置了我们需要使用的_function.scss，和_mixin.scss。在这里还包含了一个_variables.scss文件（有的地方也称其为_config.scss），这里包含项目中所有的全局变量（比如排版本上的，配色方案等等）。

_variables.scss
_mixin.scss
_function.scss
_placeholders.scss(也有称为_helpers.scss)

Layout

layout/文件夹(有时也称为partials/)中放置了大量的文件，每个文件主要用于布局方面的，比如说"header"，“footer”等。他也会包括_grid.scss文件，用来创建网格系统。

_grid.scss
_header.scss
_footer.scss
_sidebar.scss
_forms.scss

Components
对于一些小组件，都放在了components/文件夹（通常也称为modules/）

_media.scss
_carousel.scss
_thumbnails.scss

Page

如果你需要针对一些页面写特定的样式，我想将他们放在page/文件夹中，并且以页面的名称来命名。例如，你的首页需要制作一个特定的样式，那么你就可以在page/文件夹中创建一个名叫_home.scss文件。

Themes

要为一个大型的网站制作多个主题，那么有一个theme/文件夹是非常有意义的。你可以把主题相关的文件放在这个文件夹中。

_theme.scss
_admin.scss

Vendors

主要用来包含来自外部的库和框架的CSS文件。比如Bootstrap,jQueryUI。把这些文件放在同一个文件夹中。
例如：
bootstrap.scss
jquery-ui.scss

config.rb的其它配置项及作用

# import-once 保证后面如果重复引用了模块，那么只会使用一次，虽然引用了多次，但不会报错
# 例如 import 'compass/reset' ...  import 'compass/reset'  只会使用一次
# 但是如果真的需要引用两次，那么怎么办呢？这样写 import 'compass/reset!' 在后面添加 ! 
require 'compass/import-once/activate'
# 可以使用compass-normalize来替换掉原来的compass/reset
require 'compass-normalize'

# 解析后的显示方式
# 如果项目即将上线，就需要压缩CSS以确保文件尽可能的小，这时候只需要把output_style设置为：compressed
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# 样式打包发布后的根目录
http_path = "/"  
# 存放css文件的目录
css_dir = "css"  
# 存放sass的目录
sass_dir = "sass"
# 存放图片的目录，当在css或者sass中引入的时候，不需要加上img这个目录
images_dir = "img" 
# 存放js的文件目录
javascripts_dir = "js"
# 取消生成注释
line_comments=true


# 当我们编译Sass文件时，在我们的根目录会出现.sass-cache文件夹，看文件夹名就知道这里放的该是Sass缓存文件，设置为true可以帮我们加快sass文件的编译
cache = true


# 使用相对路径进行查找文件
# relative_assets = true

# 设置开发或者生产环境
# enviroment = :production :development

# 设置偏向的语法  :sass :scss
# preferred_syntax = :sass

Sass笔记补充