sass基础

砺能
166 阅读3分钟

1.使用变量

  • 变量声明 使用$标识变量，中划线命名的内容与下划线命名的内容是互通的。
$link-color: blue;
a {
    color: $link_color;   
}
// => 编译后: a { color: blue; }
  • 变量引用
  1. 凡是css标准值可存在的地方，变量就可以使用，css生成时，变量会被它们的值替代;
  2. 声明变量时，变量值可以引用其他变量的值。
$highlight-color: #F90;
.selected {
    border: 1px solid $highlight-color;  
}
// => 编译后: .selected { border: 1px solid #F90; }

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
    border: $highlight-border;  
}
// => 编译后: .selected { border: 1px solid #F90; }

$nav-color: #F90;
nav {
  $width: 100px; // $width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用;
  width: $width;
  color: $nav-color;
}
// => 编译后: nav { width: 100px; color: #F90; }

$link-color: blue;
a {
  color: $link_color; // $link-color 和 $link_color 其实指向的是同一个变量,两种方式命令的变量内容互通;
}
// => 编译后: a { color: blue; }

2.嵌套 css 规则

  • 父选择器的标识符&

在父选择器之前添加选择器

#content aside {
  color: red;
  body.ie & { color: green }
}
// 编译后: 
// #content aside {color: red};  
// body.ie #content aside { color: green }

3.导入sass文件

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

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

使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀。

  • 使用sass局部文件
  1. 当通过@import把sass样式分散到多个文件时，通常想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的css文件，这样的sass文件成为局部文件。
  2. 局部文件命名：以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当@import一个文件时，可以不写文件全名，即省略文件名开头的下划线。
导入 themes/_night-sky.scss 
// => @import “themes/night-sky”;
  • 默认变量值 假如你写了一个可被他人通过@import导入的sass库文件，可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现。含义是如果这个变量被声明赋值了，那就用声明的值，否则就用这个默认值。(注：自定义的值先于@import，否则无效)
_lib.scss:                            
$color: red!default;   
.btn {                  
    color: $color;
}
使用:
$color: blue;
@import “lib”;
// => 编译后：.btn { color: blue; }
  • 嵌套导入 跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效。
_blue-theme.scss:
aside {         
    background: blue;
    color: white
}

.blue-theme { @import “blue-theme” }
// 等价于:
.blue-theme {
    aside {         
        background: blue;
        color: #fff;
    }
}

4.混合器

当你的样式变得越来越复杂，需要大段重用样式的代码，你可以通过sass混合器实现大段样式重用。

混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，这样可以通过引用这个名字重用这段样式。

然后就可以在样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中所有样式放在@include被调用的地方。

_form.scss:
$base-color: #f5f5f5;
@mixin form-border {
    border: 1px solid $base-color;
    border-radius: 3px;
    outline: none;
}
使用:
@import “form”;
.login-form {
    background: red;
    @include form-border;  // 通过 @include导入
}
// => 编译后：
.login-form {
    background: red;
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    outline: none;
}
  • 混合器中的css规则 混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。
@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        list-style-type: none;
    }
}
ul.plain {
    color: #444;
    @include no-bullets;
}
// => 编译后:
ul.plain {
    color: #444;
    list-style: none;
}
ul.plain li {
    list-style-image: none;
    list-style-type: none;
}
  • 给混合器传参
  1. 通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。
  2. 当你@include混合器时，有时很难区分参数的意思，参数之间的顺序。为了解决这个问题，sass允许通过语法$name: value形式指定参数值。这样就不必在乎参数顺序，只需要参数没漏掉即可。
@mixin link-colors ($normal, $hover, $visited) {
    color: $normal；
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}

a { 
    @include link-colors( blue, red, green ); 
}
或：
a { 
    @include link-colors($normal: blue, $visited: green, $hover: red ); 
}
// => 编译后:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
  • 默认参数值 为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。
@mixin link($normal-color, $hover-color, $visited-color: #000) {
    color: $normal-color,
    &:hover{
        color: $hover-color;
    }
    &:visited{
        color: $visited-color;
    }
}
.login {                  
    a {                         
        @include link(blue, red);  
    }
}
// => 编译后:
.login a { color: blue; }
.login a:hover { color: red; }
.login a:visited { color: #000; }

5.使用选择器继承来精简css

@extend指令告诉sass一个选择器的样式从另一个选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用@extend就显得很有用。

.button-basic {              
    border: none;           
    padding: 15px 30px;  
    text-align: center;           
    font-size: 16px;              
    cursor: pointer;              
}                               
.button-report{                
    @extend .button-basic;     
    background-color: red;      
}                             
.button-submit{               
    @extend .button-basic;      
    background-color: green;    
    color: white;               
}
// => 编译后:
button-basic,.button-report,.button-submit {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.button-report {
    background-color: red;
}
.button-submit {
    background-color: green;
    color: white;
}
  • 继承的高级用法 任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。最常用的一种高级用法是继承一个html元素的样式。
.disabled {
    color: gray;
    @extend a;
}
---------------------------------------------------------------
.hoverlink {                    
    @extend a:hover;   
}
a:hover {                       
    text-decoration: underline;
}
// => 编译后:
a:hover, .hoverlink {
    text-decoration: underline;
}
  • 占位符选择器 取代以前css中的基类造成的代码冗余的情形，因为%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码。
%demo1 {                   
    border-radius: 50%; 
}                                
%demo2 {                      
    background: red;           
}
a {
    @extend %demo1;
    @extend %demo2;
}
// => 编译后:
a {
    border-radius: 50%;
    background: red;
}
avatar
文章
阅读
粉丝