sass教程

超、凢脫俗 2021-08-13 12:54 407阅读 0赞

**变量声明**

任何用作css属性值的赋值都可以用sass的变量值

$nav_width:100px;
    
    .box{
       width:$nav_width;
       height:100px;
    }
    
    编译后
    .box{
        width:100px;
        height:100px;  
    }

也可以用空格分隔多个属性值,或者用逗号分隔多个属性值

$border-style:1px solid red;

$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;

**变量引用**

$nav-bgStyle:#eee;
    
    .nav{
       border:1px solid $nav-bgStyle;
       background:$nav-bgStyle;   
    }
    //编译后
    .nav{
       border:1px solid #eee;
       background:#eee;   
    }
    
    在声明变量时，变量值也可以引用其他变量
    
    $highlight-color: #F90;
    
    $highlight-border: 1px solid $highlight-color;
    
    .selected {
      border: $highlight-border;
    }
    
    //编译后
    .selected {
      border: 1px solid #F90;
    }

**嵌套css规则**

#content {
      article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
      }
      aside { background-color: #EEE }
    }
    
    编译后
    
    #content article h1 { color: #333 }
    #content article p { margin-bottom: 1.4em }
    #content aside { background-color: #EEE }
    
    
    群组选择器可以嵌套
    .container {
      h1, h2, h3 {margin-bottom: .8em}
    }
    .container h1, .container h2, .container h3 { margin-bottom: .8em }
    
    
    nav, aside {
      a {color: blue}
    }
    nav a, aside a {color: blue}
    
    
    
    嵌套属性
    nav {
      border: 1px solid #ccc {
      left: 0px;
      right: 0px;
      }
    }
    nav {
      border: 1px solid #ccc;
      border-left: 0px;
      border-right: 0px;
    }

**导入sass文件**

文件color.sass
    
    导入使用 @import "color"

**混合器@mixin    **  当需要在多处使用同一个样式使用混合器

@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;
    }
    
    
    使用@mixin定义  使用@include调用
    编译后
    .notice {
      background-color: green;
      border: 2px solid #00aa00;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

** 混合器也可以传参数以及默认参数**

@mixin box-style($width,$height,$background:blue){
        width:$width;
        height:$height;
        background:$background;
    }
    传参也可以传递默认参数
    
    .box{
       @include box-style(200px,200px);
    }
    
    编译后
    .box{
       width:200px;
       height:200px;
       background:blue;  
    }

**继承 **

//通过选择器继承继承样式
    .error {
      border: 1px solid red;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    
    .seriousError将会继承样式表中任何位置处为.error定义的所有样式
    .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
    
    //.seriousError从.error继承样式
    .error a{  //应用到.seriousError a
      color: red;
      font-weight: 100;
    }
    h1.error { //应用到hl.seriousError
      font-size: 1.2rem;
    }
    
    在class="seriousError"的html元素内的超链接也会变成红色和粗体。