SCSS 笔记

た入场券 2022-06-10 12:13 171阅读 0赞

# SCSS 笔记 #

内容来自 [sass语法总结][sass]

## 编译 ##

### 使用gulp-sass自动化编译 ###

Gulp 配置 Sass 编译的示例代码：

### 编译错误 ###

1.  要用UTF-8
2.  文件路径及文件名不要用中文

### 输出方式 ###

outputStyle的值可为：

1. 嵌套输出方式 **nested**

nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

2. 展开输出方式 **expanded**（默认样式）

nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

3. 紧凑输出方式 **compact**

nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

4. 压缩输出方式 **compressed**

nav ul{ margin:0;padding:0;list-style:none}nav li{ display:inline-block}nav a{ display:block;padding:6px 12px;text-decoration:none}

## 变量 ##

**声明变量**：`$变量名`

`$width : 300px;`

**普通变量 & 默认变量**

$fontSize: 12px;
    body{ font-size:$fontSize; }
    $baseLineHeight:1.5 !default;
    body{ line-height: $baseLineHeight; }

**局部变量 & 全局变量（3.4+）**

$color: orange !default;//定义全局变量
    .block {
      color: $color;//调用全局变量
    }
    em {
      $color: red;//定义局部变量（全局变量 $color 的影子）
      a {
        color: $color;//调用局部变量
      }
    }

## 注释 ##

<table> 
 <thead> 
  <tr> 
   <th>注释类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/*…*/</td> 
   <td>这样的注释可以在CSS文件中显示出来</td> 
  </tr> 
  <tr> 
   <td>//…</td> 
   <td>这样的注释只在sass文件中可见</td> 
  </tr> 
 </tbody> 
</table>

## 嵌套 ##

### 选择器嵌套 ###

nav {
      a {
        color: red;
    
        header & {
          color:green;
        }
      }
    }

对应的css：

nav a { color:red; }
    header nav a { color:green; }

其中&代表其所在位置的所有长辈元素

### 属性嵌套 ###

主要用于padding ，margin，font等属性

.box { border: { top: 1px solid red; bottom: 1px solid green; }
    }

对应的css：

.box { border-top: 1px solid red; border-bottom: 1px solid green; }

### 伪类嵌套 ###

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    }

对应的css：

clearfix:before, .clearfix:after { content: ""; display: table; }

## 混合宏 ##

### 声明混合宏@mixin ###

1. 不带参数的混合宏

@mixin border-radius{ 
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

2. 带参数的混合宏

//一个参数时，可以指定默认值
    @mixin border-radius($radius:5px){
       //此时的5px为默认参数，传入其他值时覆盖该值
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }
    //传2个参数
    @mixin center($width, $height){
    ...
    }
    //参数过多 ，一个特别的参数 （...）
    @mixin box-shadow($shadows...){
      @if length($shadows) >= 1 {
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
      } @else {
        $shadows: 0 0 2px rgba(#000,.25);
        -webkit-box-shadow: $shadow;
        box-shadow: $shadow;
      }
    }

3. 复杂的混合宏

@maxin box-shadow($shadow..){
        @if length($shadow) >= 1{
            @include prefixer(box-shadow, $shadow);
        } @else {
            $shadow:0 0 4px rgba(0,0,0,.3);
            @include prefixer(box-shadow, $shadow);
        }
    }

### 调用混合宏@include ###

button{
        @include border-radius;
    }

不足之处:会产生冗余的代码块，如：

@mixin border-radius{ 
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .box {
      @include border-radius;
      margin-bottom: 5px;
    }
    .btn {
      @include border-radius;
    }

编译生成的CSS为

.box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; }
    .btn { -webkit-border-radius: 3px; border-radius: 3px; }

而理想的CSS为

.box, .btn{ -webkit-border-radius: 3px; border-radius: 3px; }
    .box{ margin-bottom: 5px; }

## 占位符%placeholder ##

通过`%placeholder`声明的代码，如果不被`@extend`调用的话，不会产生任何代码

%mt5 {
      margin-top: 5px;
    }
    %pt5{
      padding-top: 5px;
    }
    
    .btn {
      @extend %mt5;
      @extend %pt5;
    }
    
    .block {
      @extend %mt5;
    
      span {
        @extend %pt5;
      }
    }

编译出来的CSS

.btn, .block { margin-top: 5px; }
    .btn, .block span { padding-top: 5px; }

## 拓展/继承@extend ##

通过关键词 `@extend`来继承已经存在的样式块

.btn {
      border: 1px solid #ccc;
      padding: 6px 10px;
      font-size: 14px;
    }
    .btn-primary {
      background-color: #f36;
      color: #fff;
      @extend .btn;
    }
    .btn-second {
      background-color: orange;
      color: #fff;
      @extend .btn;
    }

生成的CSS

.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }
    //代码进行了合并
    .btn-primary { background-color: #f36; color: #fff; }
    .btn-second { background-clor: orange; color: #fff; }

中途小结

<table> 
 <thead> 
  <tr> 
   <th>–</th> 
   <th>混合宏</th> 
   <th>占位符</th> 
   <th>继承</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>声明方式</td> 
   <td>@mixin</td> 
   <td>%placeholder</td> 
   <td>.class</td> 
  </tr> 
  <tr> 
   <td>调用方式</td> 
   <td>@include</td> 
   <td>@extend</td> 
   <td>@extend</td> 
  </tr> 
  <tr> 
   <td>特色</td> 
   <td>可以传参</td> 
   <td>合并代码</td> 
   <td>不调用，不产生代码</td> 
  </tr> 
 </tbody> 
</table>

## 插值\#\{\} ##

$properties: (margin, padding);
    @mixin set-value($side, $value) {
        @each $prop in $properties {
            #{
       $prop}-#{
       $side}: $value;
        }
    }
    .login-box {
        @include set-value(top, 14px);
    }

编译出的CSS

.login-box { margin-top: 14px; padding-top: 14px; }

在编译 CSS 文件时不会改变其数据类型。只有一种情况例外，使用`#{ }`插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

@mixin firefox-message($selector) { 
        body.firefox #{$selector}:before {
            content: "Hi, Firefox users!";
        }
    }
    @include firefox-message(".header");

编译出来的CSS为

body.firefox .header:before { content: "Hi, Firefox users!"; }

另外 当`deprecated = property syntax`时，所有的字符串都将被编译为无引号字符串，不论是否使用了引号。

## 运算 ##

**加、减、乘、除**

*  加减注意单位一致，
 *  乘除注意单位不能同时存在，
 *  运算符和变量，数值中间用空格分开

**颜色计算**

每两位进行运算

**字符运算**

用 + 串联

如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。以等号左边的为准。

p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }

编译结果

p:before { content: "Foo Bar"; font-family: sans-serif; }

## 控制命令 ##

### @if @else @else if ###

@mixin blockOrHidden($boolean:true) { 
      @if $boolean { 
          @debug "$boolean is #{$boolean}";
          display: block;
        }
      @else { 
          @debug "$boolean is #{$boolean}";
          display: none;
        }
    }
    
    .block {
      @include blockOrHidden;
    }
    
    .hidden{
      @include blockOrHidden(false);
    }

编译出来的CSS

.block { display: block; }
    .hidden { display: none; }

### @for ###

//2种方式
    @for $i from <start> through <end> //包括 end 这个值
    @for $i from <start> to <end> //不包括 end 这个数
    //$i 表示变量
    //start 表示起始值
    //end 表示结束值
    $grid-prefix: span !default;
    $grid-width: 60px !default;
    $grid-gutter: 20px !default;
    
    %grid {
      float: left;
      margin-left: $grid-gutter / 2;
      margin-right: $grid-gutter / 2;
    }
    @for $i from 1 through 12 {
      .#{
       $grid-prefix}#{
       $i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }
    }

编译出来的CSS

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { float: left; margin-left: 10px; margin-right: 10px; }
    .span1 { width: 60px; }
    ...

### @while ###

$types: 4;
    $type-width: 20px;
    
    @while $types > 0 {
        .while-#{$types} { 
            width: $type-width + $types;
        }
        $types: $types - 1;
    }

编译出来的CSS

.while-4 { width: 24px; }
    .while-3 { width: 23px; }
    .while-2 { width: 22px; }
    .while-1 { width: 21px; }

### @each ###

@each $var in <list>
    
    //$var 就是一个变量名，
    //<list> 是一个 SassScript 表达式，他将返回一个列表值。

举个例子

$list: adam john wynn mason kuroir;//$list 就是一个列表
    
    @mixin author-images {
        @each $author in $list {
            .photo-#{$author} { 
                background: url("/images/avatars/#{ $author}.png") no-repeat;
            }
        }
    }
    .author-bio {
        @include author-images;
    }

编译出来的CSS

.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; }
    .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; }
    .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; }
    .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; }
    .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }

## 函数 ##

### 字符串函数 ###

**unquote($string)：删除字符串中的引号**  
unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。  
只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号

**quote($string)：给字符串添加引号**  
使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。  
同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线\_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错

**To-upper-case()：将字符串转换成大写**

**To-lower-case()：将字符串转换成小写**

### 数字函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>percentage($value)</td> 
   <td>将一个不带单位的数转换成百分比值</td> 
  </tr> 
  <tr> 
   <td>round($value)</td> 
   <td>将数值四舍五入，转换成一个最接近的整数</td> 
  </tr> 
  <tr> 
   <td>ceil($value)</td> 
   <td>将大于自己的小数转换成下一位整数</td> 
  </tr> 
  <tr> 
   <td>floor($value)</td> 
   <td>将一个数去除他的小数部分</td> 
  </tr> 
  <tr> 
   <td>abs($value)</td> 
   <td>返回一个数的绝对值</td> 
  </tr> 
  <tr> 
   <td>min($numbers…)</td> 
   <td>找出几个数值之间的最小值</td> 
  </tr> 
  <tr> 
   <td>max($numbers…)</td> 
   <td>找出几个数值之间的最大值</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>获取随机</td> 
  </tr> 
 </tbody> 
</table>

### 列表函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>描述</th> 
   <th>注意</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length($list)</td> 
   <td>返回一个列表的长度值</td> 
   <td>length() 函数中的列表参数之间使用空格隔开，不能使用逗号</td> 
  </tr> 
  <tr> 
   <td>nth($list, $n)</td> 
   <td>返回一个列表中指定的某个标签值</td> 
   <td>$n 必须是大于 0 的整数</td> 
  </tr> 
  <tr> 
   <td>join($list1, $list2, [$separator])</td> 
   <td>将两个列给连接在一起，变成一个列表</td> 
   <td>只能将两个列表连接成一个列表，合并多个时嵌套join()，join() 函数中 $separator 除了默认值 auto 之外，还有 comma 和 space 两个值</td> 
  </tr> 
  <tr> 
   <td>append($list1, $val, [$separator])</td> 
   <td>将某个值放在列表的最后</td> 
   <td>可选参数同上</td> 
  </tr> 
  <tr> 
   <td>zip($lists…)</td> 
   <td>将几个列表结合成一个多维的列表</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>index($list, $value)</td> 
   <td>返回一个值在列表中的位置值</td> 
   <td><strong>在 Sass 中，值是从1开始，没有则返回false</strong></td> 
  </tr> 
 </tbody> 
</table>

### Introspection函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>描述</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type-of($value)</td> 
   <td>返回一个值的类型</td> 
   <td>number，string，color，bool</td> 
  </tr> 
  <tr> 
   <td>unit($number)</td> 
   <td>返回一个值的单位</td> 
   <td>单位</td> 
  </tr> 
  <tr> 
   <td>unitless($number)</td> 
   <td>判断一个值是否带有单位</td> 
   <td>true/false</td> 
  </tr> 
  <tr> 
   <td>comparable($number1, $number2)</td> 
   <td>判断两个值是否可以做加、减和合并</td> 
   <td>true/false</td> 
  </tr> 
 </tbody> 
</table>

### Miscellaneous函数 ###

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一个值，当条件不成立时返回另一个值：

if($condition,$if-true,$if-false)
    >> if(true,1px,2px)1px
    >> if(false,1px,2px)2px

### Map函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>描述</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>map-get($map,$key)</td> 
   <td>根据给定的 key 值，返回 map 中相关的值</td> 
   <td>如果不存在，返回null</td> 
  </tr> 
  <tr> 
   <td>map-merge($map1,$map2)</td> 
   <td>将两个 map 合并成一个新的 map</td> 
   <td>合并后的map，如果有相同的值，以后面的为主</td> 
  </tr> 
  <tr> 
   <td>map-remove($map,$key)</td> 
   <td>从 map 中删除一个 key</td> 
   <td>返回一个新 map</td> 
  </tr> 
  <tr> 
   <td>map-keys($map)</td> 
   <td>返回 map 中所有的 key</td> 
   <td>返回 map 中所有的 key</td> 
  </tr> 
  <tr> 
   <td>map-values($map)</td> 
   <td>返回 map 中所有的 value</td> 
   <td>返回 map 中所有的 value</td> 
  </tr> 
  <tr> 
   <td>map-has-key($map,$key)</td> 
   <td>根据给定的 key 值判断 map 是否有对应的value 值</td> 
   <td>如果有返回 true，否则返回 false</td> 
  </tr> 
  <tr> 
   <td>keywords($args)</td> 
   <td>返回一个函数的参数，这个参数可以动态的设置 key 和 value</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

### Opacity函数 ###

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alpha($color) /opacity($color)</td> 
   <td>获取颜色透明度值</td> 
  </tr> 
  <tr> 
   <td>rgba($color, $alpha)</td> 
   <td>改变颜色的透明度值</td> 
  </tr> 
  <tr> 
   <td>pacify($color, $amount) / fade-in($color, $amount)</td> 
   <td>使颜色更不透明</td> 
  </tr> 
  <tr> 
   <td>transparentize($color, $amount) / fade-out($color, $amount)</td> 
   <td>使颜色更加透明</td> 
  </tr> 
 </tbody> 
</table>

## @规则/指令(directive) ##

### @import ###

默认情况是sass的`@import`，以下情况会用CSS的`@import`

*  如果文件的扩展名是 .css。
 *  如果文件名以 http:// 开头。
 *  如果文件名是 url()。
 *  如果 `@import` 包含了任何媒体查询（media queries）

@import "foo.scss";
    @import "foo"//不带后缀
    //都会引入foo.scss文件
    @import "rounded-corners", "text-shadow";
    //引入多个文件

如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线

**在同一个目录不能同时存在带下划线和不带下划线的同名文件。** 例如， \_colors.scss 不能与 colors.scss 并存

**嵌套 @import**

虽然大部分时间只需在顶层文件使用 `@import` 就行了， 但是，你还可以把他们包含在 CSS 规则 和`@media` 规则中。

**css与sass @import区别**

css 的`@import`规则允许在一个css文件中导入其他css文件，然而，只有执行到`@import`时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass的`@import`规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合宏均可在导入文件中使用。

### @media ###

Sass 中的 `@media` 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 `@media` 指令，它将冒泡到外面。

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

编译出来的CSS

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

### @at-root ###

`@at-root` 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 `@at-root`。

.a {
      color: red;
    
      .b {
        color: orange;
    
        .c {
          color: yellow;
    
          @at-root .d { 
            color: green;
          }
        }
      }
    }

编译出来的CSS

.a { color: red; }
    .a .b { color: orange; }
    .a .b .c { color: yellow; }
    .d { color: green; }

### @debug ###

`@debug` 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 `@debug` 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@debug 10em + 12em;
    输出
    Line 1 DEBUG: 22em

### @warn ###

`@warn` 和 `@debug` 功能类似，用来帮助我们更好的调试 Sass。如：

@mixin adjust-location($x, $y) {
      @if unitless($x) {
        @warn "Assuming #{ $x} to be in pixels";
        $x: 1px * $x;
      }
      @if unitless($y) {
        @warn "Assuming #{ $y} to be in pixels";
        $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
    }

### @error ###

`@error` 和 `@warn`、`@debug`功能是如出一辙。

@mixin error($x){ 
      @if $x < 10 { 
        width: $x * 10px;
      } @else if $x == 10 { 
        width: $x;
      } @else { 
        @error "你需要将#{$x}值设置在10以内的数";
      }
    }
    .test {
      @include error(15);
    }
    编译时
    你需要将15值设置在10以内的数 on line 7 at column 5

## 扩展 ##

你可能也听说过其他css预处理语言，如less、stylus等，这里介绍篇不错的文章：[表析LESS、Sass和Stylus的异同][LESS_Sass_Stylus]

在了解scss后，你可以再看看[Compass][]。Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery的关系。简单说，Compass是Sass的工具库（toolkit）。

[sass]: http://www.jianshu.com/p/e139d449f5bb
[LESS_Sass_Stylus]: https://www.cnblogs.com/hykun/p/LessSassStylus.html
[Compass]: http://www.ruanyifeng.com/blog/2012/11/compass.html