sass语法练习解析--实例练习

Posted 2020-07-01 落暮

暂时使用的是：Koala，监测转义

$fff: #ffffff;

$red:red;

 

h1{

  color: $fff;

}

简单调用

 

 

#content{

    color: $fff;

    .con{

      content: $red;

     }

}

或者：

#content,#nei{

   a{

     color: $fff;

    }

}

#content a{color: #fff; }

#nei a{color: #fff; }

嵌套（css里面嵌套要复制什么的，挺麻烦）

 

#content a{

      color: $fff;

      &:hover{

       color: $red;

      }

}

或者：

#content a{

      color:$fff;

      body.ie &{

        color: $red

      }

}

//当body的class为ie的时候，#content a的颜色为red颜色

&是父级标识符~

 

article{

~article{border-top: 1px dashed #ccc }

>section{background: #eee }

dl>{

dt{color: #333 }

dd{color: #555 }

}

nav+ & {margin-top: 0 }

}

article ~article{border-top: 1px dashed #ccc  }

article>section{background: #eee }

article dl>dt{color: #333 }

article dl>dd{color: #555  }

nav+article{margin-top: 0 }

 

 

nav{

  border:{

    color:$fff;

    style:solid;

    width:1px;

  }

}

编译出来后：nav{ border-style: solid; border-width: 1px; border-color: #ccc;}

 

还有中嵌套方法：

nav{

        border:red solid 1px {

           left:0px;

           right:0px;

           }

       }

编译出来就是： nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }

 

注：sass的变量是可覆盖的，也就是说可以重复，后面的覆盖前面的

 

$fancybox-width: 400px !default;

defult相当于css里的!important,不过！defult是应用于变量的，且，其含义是，如果该变量已声明赋值，则无效，否则，就用这个defult的值，也就是设置变量默认值

 

sass支持局部导入，即是在css规则内导入：例：

  a{

    background:red;

        color:blue;

  }

  上面这个是theme.scss的内容

  .content{

     @import "theme";

   //只有在content这个类内才会使用theme.scss的样式

  } 

  输出结果：

  .content a{

       background:red;

              color:blue;

  }

 

sass中导入css不会用，

 

---

sass中的注释相关：

/*这种注释编译后会显示在css中*/

//这种注释编译后只会显示在scss中而不会显示到css中

 

body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0；}

 

 

---

混合器

@mixin name{

  border-radius:5px;

  -webkit-border-radius:5px;

  -o-border-radius:5px;

}

.btn{

   background:red;

 @include name;

 }

 

输出为：

.btn{

   background:red;

   border-radius:5px；

  -webkit-border-radius:5px;

  -o-border-radius:5px;

 }

这种写法的话好在公用模块，以后调用起来相同样式会很轻松，不过一般是用来处理hack的

还有种技巧是：

@mixin ulPublic{

    color:red;

    li{

        color:blue;

    }

}

ul{

    @include ulPublic;

}

输出是：

ul {

  color: red;

}

ul li {

  color: blue;

}

 

还有下面这种写法：

@mixin olpublic($defult,$hover,$active ){

    li a{

    color: $defult;

    &:hover {color: $hover};

    &:active  {color: $active };

    }

}

ol{

   @include olpublic(red,yellow,green);

}

输出：

ol li a {

  color: red;

}

ol li a:hover {

  color: yellow;

}

ol li a:active {

  color: green;

}

 

（感觉有了sass会快捷很多，同时也会增加模块化的概念）

 

下面的写法是模块化公用：

@mixin module(

   $normal,

   $hover: $normal,

   $link: $normal

)

{

    color: $normal;

    &:hover{color:$hover}

    &:link{color:$link}

 

}

.module span{

    @include module(yellow);

}

输出为：

.module span {

  color: yellow;

}

.module span:hover {

  color: yellow;

}

.module span:link {

  color: yellow;

}

统一调用

 

注：混合选择器不仅包含css规则，也包含选择器和选择器中的属性

---

继承@extend

@mixin name{

    border-radius:5px;

    -webkit-border-radius:5px;

    -moz-border-radius:5px;

    -o-border-radius:5px;

    -ms-border-radius:5px;

}

.btn{

      background: $fff;

      color: $fff;

      border: $borderNo;

      @include name;

}

.extend span{

    @extend .btn;

}

 

会输出：

.btn, .extend span {

  background: #7abbff;

  color: #7abbff;

  border: none;

  border-radius: 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  -o-border-radius: 5px;

  -ms-border-radius: 5px;

}

 

继承比较高级的应用：

直接继承元素原生属性。。。（不对，只能继承自己写的）

  注释：最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承