sass——css预处理入门笔记

作者: 春木橙云 | 来源:发表于2017-08-22 13:51 被阅读47次
    讨厌现在的火影,越来越感觉是在看龙珠

    上一篇文章 刚刚介绍了less,趁热打铁,赶快学习一下与之相似的sass吧!

    总体来讲,基本类似吧~

    基本用法

    • 变量
      解释:sass支持css变量化。与less区别在于,less使用 @+变量名 声明变量,而sass使用 $+变量名 声明变量。
    $new-color: red;
    
    .h1{
        color: $new-color;
    }
    

    如果需要使用变量镶嵌,需要使用 #{ }

    $direction: right;
    
    .h2{
        border-#{$direction}:1px solid red;
    }
    

    • 计算
      解释:这个不用解释,和less一样,可以对css进行计算。
    .h3{
        color: #333+#456;
        position: relative;
        top: 10px * 3;
        left: 30px / 2
    }
    

    • 嵌套
      解释: 一层套一层。(多一点通俗,少一点套路)
    div {
        h1{
            color: blue;
        }
        color : red;
    }
    

    • 属性嵌套
    div{
        border: {
            color: red;
        }
    }
    

    • 嵌套中的伪类用法
      解释:在嵌套的代码块内,可以使用&引用父元素。
    div{
        &:hover{
            border:1px solid red;
        }
    }
    

    • 注释
      解释:sass的注释有区别对待,主要看你想不想在编译后的css文件中保留注释代码。

    • 只保留在sass文件中而不出现在编译好的css文件中:// + 注释代码

    • 需要出现在编译好的css文件中:/*! + 注释代码 + */


    代码复用

    牛叉的来了,当然下面这些不常用,如果刚刚使用sass或者less,从这里开始可以忽略了。当然,这里并不难懂,有精力还是要学会的哈。


    • css继承
      解释:使用 @extend 样式A继承了样式B所有的css样式。

    sass:

    .h2{
        border-#{$direction}:1px solid red;
    }
    
    .h4{
        @extend .h2;
        margin: 10px;
    }
    

    css:

    .h2, .h4 {
      border-right: 1px solid red;
    }
    
    .h4 {
      margin: 10px;
    }
    

    • Mixin
      解释:将css模块化,形成类似代码块的css块。允许使用变量。@Mixin 声明css块,@include 调用css块。

    sass:

    @mixin bigBox {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
    }
    
    div{
        @include bigBox;
    }
    

    css:

    div {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
    }
    

    牛叉的是,他居然可以接受参数!
    sass:

    @mixin bigBox($haha:100px) {
        width: $haha;
        height: $haha;
        border: 1px solid #ccc;
    }
    
    div{
        @include bigBox;
    }
    div{
        @include bigBox(500px);
    }
    

    css:

    div {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
    }
    
    div {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
    }
    

    • 插入
      解释: 类似css的import吧。
    @import "path/filename.scss";
    

    函数化加循环

    我真的开始怀疑人生,这还是我认识的css吗?

    • if判断

    sass:

    $haha: 100px;
    .h1{
        @if $haha > 80px {
            margin: $haha;
            border: 1px solid red;
        }
        @if $haha <= 80px{
            border: 1px solid blue;
        }
    }
    

    css:

    .h1 {
      margin: 100px;
      border: 1px solid red;
    }
    

    还有 @else的搭配使用。
    sass:

    $haha: 1px;
    .h1{
        @if $haha > 80px {
            margin: $haha;
            border: 1px solid red;
        }@else {
            color: red;
        }
    }
    

    css:

    .h1 {
      color: red;
    }
    
    • for循环
      sass:
    @for $i from 20 to 25 {
        .border-#{$i}{
            border : #{$i}px solid red;
        }
    }
    

    css:

    .border-20 {
      border: 20px solid red;
    }
    
    .border-21 {
      border: 21px solid red;
    }
    
    .border-22 {
      border: 22px solid red;
    }
    
    .border-23 {
      border: 23px solid red;
    }
    
    .border-24 {
      border: 24px solid red;
    }
    
    • while循环:

    sass:

    $i : 5;
    @while $i > 0 {
        .item-#{$i}{
            width: #{i}px;
        }
        $i : $i - 1;   
    }
    

    css:

    .item-5 {
      width: ipx;
    }
    
    .item-4 {
      width: ipx;
    }
    
    .item-3 {
      width: ipx;
    }
    
    .item-2 {
      width: ipx;
    }
    
    .item-1 {
      width: ipx;
    }
    

    自定义函数:
    sass:

      @function double($n) {
        @return $n * 2;
      }
      #sidebar {
        width: double(5px);
      }
    

    css:

    #sidebar {
        width: 10px;
    }
    

    如有遗漏,欢迎提醒更改,谢谢啦!

    THE END

    大哥,不点个赞嘛

    相关文章

      网友评论

        本文标题:sass——css预处理入门笔记

        本文链接:https://www.haomeiwen.com/subject/eiknrxtx.html