1. 技术文章
  2. 关于sass的介绍和基本语法

关于sass的介绍和基本语法

由 折月煮酒 提交于 2020-02-20 01:46:09

引入

　　什么是sass？sass是css预处理器。

      那预处理器又是什么？css本身不是一种编程语言，而预处理器是用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

      如今主流的预处理器分Less、Sass 和 Stylus三种， 我用过的就是less和sass，less和sass有很多语法上的不同，但是最根本的不同点是less是基于javascript的，而sass是基于ruby开发的。

   

预处理器编译工具

  　 鱿鱼引入提到的，sass文件最终还是要编译成正常的css文件才能为页面提供样式，所以这里需要一个sass的编译工具koala,一只可爱的小考拉。 

      它可以实时编译less、sass、coffeScript和compass，编译后还可以进行代码压缩，当然还有其他很多的功能，可以到官网上去look look~

　　

　　使用方法简介：

　　只要在项目文件夹（比如文件夹名为work）内创建基本的结构，有一个sass文件，里面放入.scss文件，然后将文件夹work拖入koala界面内，就会自动生成一个css文件夹，文件夹里有编译好的css文件。ps:别忘了在.html文件里引入你的css文件喔~这样你就可以放心地在你的.scss文件里写你的样式了，koala会帮你实时编译成.css文件的喔~就是这么强大~！~

      如果博主的解释你还是木有懂的话~这里给大家提供一个图文并茂的链接，如果你还是没有看懂，就让你会使用koala的好gay蜜教一教你吧（然后问问自己484傻）~   

　　 ps：使用sublime的可以到这里下载sass高亮插件和插件配置方法 --> 猛戳 

      装完插件后，我的世界已经成功从灰白变成了彩色~(o゜▽゜)o☆ duangduangduang ~

 

scss和sass的区别

　　在进行语法介绍之前，要先提一下scss和sass的区别，因为刚开始我自己学sass也有些晕，明明是sass为什么有时候要以.scss结尾再进行编译呢？

　　所以我google了一下，才发现scss和sass其实是同一种东西

  • scss以.scss后缀为扩展名 ; sass是以.sass后缀为扩展名
  • scss更贴近css的写法 ; 而sass更贴近ruby的语法，是以严格的缩进式语法规则来书写，不带大括号({})和分号(;) ，这是最重要的不同

    所以也可能是因为很多程序猿不习惯sass这种写法，所以用less的程序猿才比sass多的吧，但是总的来说还是sass比less更强大

    

变量的使用

　　　1.变量声明： $

　　　2.定 义 域 ： 在{}规则块中定义的只能在{}中使用，不能在其他的地方使用。而在{}外的变量可以在其他的{}内使用，有点类似js里的局部变量。

　　

//定义变量，类似全局变量 $nav-color: #F90;   
$height:800px;       
nav {  $width: 100px; //定义变量，类似局部变量，只能在此规则块中使用
  width: $width; //使用局部变量 
  background-color: $nav-color;
  height:100px;
}

section{
    height:$height;//使用局部变量
    width:200px;
    background-color:red;
}// .son可以引用nav里定义的变量$width，但是.box不可以，这就是因为sass里的代码是从上到下解析的

 

        3.变量的引用 :

        

$nav-color: #F90;
$section-border:10px solid $nav-color; //与边框有关的变量引用了与颜色有关的变量nav-color

*{
    margin:0;
}

.box{
    height:100px;
    width:100px;
    border:10px solid $nav-color;
}

section{
    height:100px;
    width:100px;
    border:$section-border;
}

 

　　　4.变量名：中划线（-）和下划线（_）互通 ：也就是说变量名取为red-rose，和取为red_rose达到的效果是相同的

       

 　关于sass变量更详细的分析还可以从w3cplus上探寻 --->  猛戳

嵌套css规则

　　    1.基本用法：像俄罗斯套娃一样，容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。

                           ！但是此处不能添加伪类  

//scss代码：
$nav-color: #F90;
$section-border:10px solid $nav-color; 

*{
    margin:0;
}

.box{
    height:100px;
    width:100px;
    border:10px solid $nav-color;
    .son{
        height:60px;
        width:60px;
        background-color:yellow;
        .sonson{
            height:30px;
            width:30px;
            background-color:blue;
        }
    }
}//编译成css后

　　.box {height: 100px;width: 100px;border: 10px solid #F90; }
　　.box .son {height: 60px;width: 60px;background-color: yellow; }
　　.box .son .sonson {height: 30px;width: 30px;background-color: blue; }

　

          2.使用伪类

　　　    标识符：&  　

            此处的标识符就我的理解来看，它类似于js里的this，是对当前元素的操作，在这里是对.sonson的操作，虽然.sonson有许多父级但并不影响它的父级

.box{
    height:100px;
    width:100px;
    border:10px solid $nav-color;
    .son{
        height:60px;
        width:60px;
        background-color:yellow;
        .sonson{
            height:30px;
            width:30px;
            background-color:blue;
            &:hover{
                background-color:red;
                cursor:pointer;
            }
        }
    }
}//编译成.css后

.box .son .sonson:hover {background-color: red; cursor: pointer;} 

           3.  群组选择器

           这样就可以减少很多重复的代码了，有没有简化很多？

//scss文件

  $nav-color: #F90;
  $section-border:10px solid $nav-color;

.box1,.box2{
    h1{
        border:$section-border;
        width:300px;
    }
}//编译成.css文件后

  .box1 h1, .box2 h1 { border: 10px solid #F90; width: 300px; }

 

 

　　　4.子组合选择器和同层组合选择器:

          子组合选择器      

　　　　　　>  :  选择一个元素的直接子元素 

          同层组合选择器  

　　　　　　+  :  选择一个元素后紧跟的一个元素

                 ~  :  选择一个元素后的所有元素

        

　　　5.嵌套属性

　　   下面拿border来举例，boder有border-style、border-width、border-color等属性,还可以分为border-left、border-top、border-bottom...等等等等~

         所以现在就有这样一种用法：

       

//.scss文件.box{
    height:100px;
    width:100px;
    margin:100px auto;
     border:1px solid black{
         top:0px;
     }
} //编译成.css文件后

　　.box {
　　　　height: 100px;
　　　　width: 100px;
　　　　margin: 100px auto;
　　　　border: 1px solid black;
　　　　border-top: 0px;　

　　}

 


导入sass文件

　　1.基本用法： @import"文件名" （不需要加后缀）

　　

　　2.默认变量

　　　　写法：!default

　　　　定义：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

　　　　好处：可以用于css组件开发

　　　　　　　 如果要进行组件开发，要使用局部文件，局部文件名前要加下划线_，但是在引用局部文件的时候可以不写下划线和后缀名，

                     如局部文件名为_fruit.scss，导入的时候就可以写成@import "fruit"

　　　　小栗子：

  

$color:red;
$color:blue !default;
p{
    color:$color;//red
}

           由于sass是至上而下执行的，所以会发生代码覆盖的情况。但是上面小栗子证实了如果使用了默认变量，就会直接使用赋过值的那个变量（eg.$color:red;）

　　　　

　　3.导入文件

　　　　写法：@import '文件名'

　　　　使用场合:

　　　　3.1 可以在scss文件里导入其他的scss文件，文件名要以_为开头，导入时可以不加_和后缀

//main.scss
@import 'body';
@import 'a';
$width:100px;
$color:#ccc;
.box{
    height:300px;
    width:$width;
    div{
        height:$width;
        width:$width;
        background-color:$color;
    }
}

//_body.scss
body{
    background-color:pink;
}

//_a.scss
.aaa{
    height:100px;
    width:100px;
    background-color:#ccc;
    &:hover{
        background-color:red;
        cursor:pointer;
    }
}

　　3.2也可以在别的元素里导入别的scss文件

//HTML结构：
 <div class="box">
        <div></div>
        <div></div>
 </div>

//main.scss  
$width:100px;
$color:#ccc;
.box{
    height:300px;
    width:$width;
      @import "a";
}

//_a.scss 给.box下的div加样式
div{
    height:10px;
    width:200px;
    background-color:yellow;    
    border:1px solid black;
}

 

混合器

       标识符：

　　　　定义混合器 @mixin

　　　　使用混合器 @include

       使用场合：需要不停重复滴使用同一段样式

       小栗子：这样就可以解决很多css3繁琐的兼容写法了

$width:100px;
$color:#ccc;

@mixin border-style{
    border:10px solid black;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
}

.box{
    height:300px;  
    width:$width; 
    @include border-style;    
}

　　 混合器传参：混合器中还可以传递参数 

 　　- 定义然后传参: 就像函数传参一样，先定义函数，然后向函数中传递参数

@mixin div-style($width,$color,$border,$border-radius,$bgcolor){ //类似定义函数
    border:$border;
    width:$width;
    height:200px;
    border-radius:$border-radius;
    -moz-border-radius:$border-radius;
    -webkit-border-radius:$border-radius;
    background:$bgcolor;
}

.box{
    @include div-style(100px,red,10px,20px,red);    //类似传递参数
}//或者而写成这样,会更清楚地显示出每个参数的值，就不用对应顺序了

　　.box{
　　　　@include div-style(
　　　　　　$width:100px,
　　　　　　$color:red,
　　　　　　$border:1px solid black,
　　　　　　$border-radius:10px,
　　　　　　$bgcolor:#ccc
　　　　);
　　}

 

　　　　

选择器继承　　　　

　　标识符：@extend

　　使用场合：需要重复使用代码时

      类似于js里的继承~

 .box{
     height:100px;
     width:100px;
     background-color:red;
     div{
         @extend .box;
         height:40px;
         background-color:blue;
     }
 }//编译成css后

    .box, .box div { height: 100px;width: 100px;background-color: red; }
    .box div { height: 40px; background-color: blue; }

 

 

静默注释　　 

 　　简单说也就是在.scss文件里的注释分为两种

　　　　// : 编译成.css后不会出现在.css文件中

   　　  /*..*/：编译成.css后会出现在.css文件中

其他

　　　　以上的一些介绍都是关于sass的一些介绍和基本语法，当然sass还有很多其他的功能，和less一样可以在样式中进行计算啦，还有很多有用的函数，那样就需要深入去学习了~好吧这篇又有点太书面化了，知识点有点繁琐，不过已经尽力简化了，参考的资料有很多太书面化都不知道在说些啥，只好又参考很多资料来理解，不过发现有了JavaScript的基础来理解sass就很容易了，比如&和js里的this来对比，选择器的继承和js里的继承来对比，收获很大~

 

 

参考资料: http://blog.jobbole.com/24671/ 

              http://www.sass.hk/sass-course.html

标签
scss
css颜色
background
border
border-radius
css样式
变量
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!