sass学习笔记

Sass

安装Sass

1. window下需先安装 Ruby，打开此命令行工具。
2. 输入 gem install sass
3. 检查安装是否成功 sass -v
4. 自动编译： sass --watch name.scss:output.css

附加：webstrom配置scss模块

1. File→Settings…→Tools→File Watchers。
   

2. 按 + 号，选择SCSS，弹出此页面，在红色箭头处选择 安装Ruby目录下的\bin\scss.bat。确定即可。
   

入门

语法

1. 编码

   @charset 'encoding_name'
   

2. 后缀名 .scss

3. 变量名建议中划线 -

交互式shell

在命令行中输入 sass -i 进入交互式shell。

变量 $

• 声明变量 $name
• 块级作用域：在选择器嵌套层级的范围内可用。
• 全局变量：不在任何嵌套选择器内定义的变量。
• 定义变量的时候可以后面带上!global标志，也为全局变量。

数字运算（+、-、*、/）

Sass数学函数在算术运算期间会保留单位。

列表（list）

nth函数可以直接方位列表中的某一项。

join函数可以将多个列表拼接在一起。

append函数可以将某项添加到列表中。

@each指令可以将添加样式到列表中的每一项。

Maps

Maps必须始终使用括号括起来，并且必须用逗号分隔。

$Maps: (key1: value1, key2: value2);

• map-get函数用来查找map中的值。
• map-merge函数用来添加值到map中的值。
• @each指令可以用来为map中的每个键值对添加样式。

父选择器的标识符 &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

// 编译后
a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
  font-weight: normal; 
}

嵌套属性

把属性名从中划线 - 的地方断开，在根属性后边添加一个冒号 :，紧跟一个{}块，把子属性部分写在这个{}块中。

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}

// 编译后
nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}

导入Sass文件 @import

以下情况不会导入任何Sass文件，仅作为普通的Css @import规则语句：

• 如果文件扩展名是 .css。
• 如果文件名以 http:// 开始。
• 如果文件名是 url() 。
• 如果 @import 中包含任何媒体查询。

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
// 编译后
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

// 如果导入文件是css格式，先把css格式改为scss格式
@import scssname.scss;
// 编译后为合并了scssname.scss的css文件

@media （与css一样，只是添加了一点功能）

• 如果一个 @media 指令出现在css规则中，它将被冒泡到样式表的顶层。并包含规则内所有的选择器。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
// 编译后
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

• 可以相互嵌套，将会使用and结合。

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
// 编译后
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

默认变量值 !default

它很像css属性中!important标签的对立面，不同的是 !default 用于变量，含义是：**如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。 **

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

混入器 @mixin

• 命名以最终视觉样式。
• 解决展示样式的重用。
• 通过 @include 引入

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

@minxin 指定默认参数值

@mixin link-colors($normal: red){
  color: $normal;
}
a {
    @include link-colors(blue);
}
// 编译后
a {
   color: blue;
}

可变参数

用于不确定一个混入或者一个函数使用多少个参数。

@mixin box-shadow($shadows...) {
    box-shadow: $shadows;
}
.shadows {
    @include box-shadow(0px 2px 5px #666);
}

可变参数也可以在 @include 一个混入mixin时使用。

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
// $values可以是list，也可以是map
$values: #ff000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
// 编译后
.primary {
  color: #ff000;
  background-color: #00ff00;
  border-color: #0000ff; 
}

传递内容块到混入 @content

样式内容块可以传递到混入包含样式的位置。样式内容块将出现在混入内的任何@content 指令的位置。

@mixin font {
   .font1 {
       @content;
   }
}
@include font {
   .fontText {
       color: red;
   }
}
// 编译后
.font1 .fontText {
   color: red;
}

**注意：**当 @content 指令指定多次或在一个循环中指定的时候，样式块将在每次调用中被复制并引用。

变量的作用域和内容块

传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用，并且变量将解析为全局值：

$color: white;
@mixin colors($color: blue) {
    background-color: $color;
    @content;
    border-color: $color;
}
.colors {
    @include colors { color: $color; 
}
// 编译后
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

使用选择器继承来精简CSS @extend

• 用于语义化样式的重用。

.error {
    border: 1px red;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}
// 编译后
.error, .seriousError {
  border: 1px red; 
}

.seriousError {
  border-width: 3px; 
}
class = 'seriousError'  ==>  class = 'seriousError error'

多重扩展

• 同一个选择器可以扩展多个选择器。
• 定义在文档后面的样式优先级高于定义在文当前面的样式。

.seriousError {
    @extend .error;
    @extent .attention;
}

链式扩展

.error {
  border: 1px red;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
}
// 编译后
.error, .seriousError, .criticalError {
  border: 1px red; 
}
.seriousError, .criticalError {
  border-width: 3px; 
}
.criticalError {
  position: fixed; 
}

合并选择器序列

• 如果没有包含相同的选择器，将生成两个新选择器：第一列出现在第二列之前，或第二列出现在第一列之前。
• 如果两个列包含里相同的选择器，相同部分将会合并在一起，其他部分交替输出。

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}
// 编译后
#admin .tabbar a, #admin .tabbar #demo .overview .fakelink, #demo .overview #admin .tabbar .fakelink {
  font-weight: bold; 
}

@extend -Only选择器

• 占位符选择器像class和id选择起，只把# 或 . 替换成 %
• 占位符选择器本身不会被编译。

#context a%extreme { color: blue; }
.notice { @extend %extreme; }
// 编译后
#context a.notice { color: blue; }

指令中的@extend

在sass中存在一些限制：Sass不可以将 @media 层外的css规则扩展给指令层内的css，意思就是，**如果在 @media (或其他CSS指令)中使用 @extend，必须扩展给相同指令层中的选择器。 **

// 这个可行
@media print {
  .error {
    border: 1px red;
  }
  .seriousError {
    @extend .error;
  }
}
// 下面这个报错
.error {
  border: 1px red;
}
@media print {
  .seriousError {
    @extend .error;
  }
}

函数指令

函数可以访问任何全局定义的变量，以及接受参数，就像一个混入（mixin）。函数可以包含语句，并且必须调用@return来设置函数的返回值。

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
// 编译后
#sidebar { width: 240px; }

@at-root

@at-root指令导致一个或多个规则被限定输出在文档的根层级上。

.parent {
    ...
    @at-root {
        .child{ ... }
    }
}
// 编译后
.parent { ... }
.child { ... }

• @at-root (without: ...) 只将除了 … 选择器之外的移到指令之外。
• @at-root (with: ...) 将 … 选择器的移到指令之外。

@debug 错误输出流

@debug 10em + 12em;

@warn 错误出错流

样式表跟踪将与消息一起将被打印出来。

@error

插值 #{}

• #{}插值可以用来在字符串中放置动态值。
• #{}靠近它的运算符都将被视为纯css，可避免运算。

p:before { content: 'I ate #{5 + 10} pies!'; }
// 编译后
p:before { content: 'I ate 15 pies!'; }

控制指令

@if 判断

@if 后面可以跟多个 @else if 语句和一个 @else 语句。

$type: moster;
p{
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else {
        color: black;
    }
}
// 编译后
p { color: green； }

@for 循环

两种形式：

• @for $var from <start> through <end>
• @for $var from <start> to <end>

注意：

• 当<start>比<end> 大的时候，为递减，反之递增。
• from...to 的形式从 <start> 开始，但不包含 <end>的值；from...through 的形式包含。

@for $i from 1 through 3 {
    .item-#($i) {
        width: 2em * $i;
    }
}

@while 循环（很少用）

@each 遍历

格式： @each $var in <list or map>

@each $animal in puma, sea-slug, egret{
  .#{$animal}-icon {
    color: red;
  }
}
// 编译后
.puma-icon { color: red; }
.sea-slug-icon { color: red; }
.egret-icon { color: red; }

@each指令也可以使用多个变量

格式: @each $var, $var2, ... in <list>

如果 <list>是列表(list)中的列表，子列表中的每个元素被分配给各自的变量。

@each $animal, $color, $cursor in (puma, black, default), (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
// 编译后
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; 
}
.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; 
}