Sass的学习笔记

一．Sass介绍 

   Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。

 

二．Sass的特色

• 完全兼容 CSS3
• 在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
• 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
• 函数库控制指令之类的高级功能
• 良好的格式，可对输出格式进行定制
• 支持 Firebug

三．Sass的语法

Sass有两种语法：

1.  第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

例如：

                

2. 缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 使用此种语法的样式表文件需要以 .sass 作为扩展名

例如：

                

注意：有一点需要注意，虽然是CSS的超级，但如果你直接把CSS文件的后缀改为.scss，浏览器是不能识别的。这也就是“预编译”的意思，Sass文件还是需要先编译为CSS文件才能正常被浏览器识别。

转换为css就是：

               

四．安装ruby环境

在[Ruby官网]选择电脑系统对应的版本下载、安装，建议默认路径即可。安装过程中注意勾选第二项：Add Ruby executablesto your PATH。安装完毕在命令行环境中通过ruby -v查看是否成功。

 

 

Ruby安装成功之后，它自带的包管理工具gem也就安装好了。常见的gem命令有：

•        gem update –system

             升级RubyGems到最新版本。安装镜像前建议先执行此操作。

•        gem update sass

             更新Sass版本

•        gem uninstall sass

              卸载Sass

五．安装Sass

  1.官方安装

   打开命令行通过gem执行Sass安装命令，再查看是否安装成功：

    

  2.通过镜像安装

     比官方安装方法多2步：需要先移除默认的源，再添加Ruby China的源，查看安装成功之后，最后再执行官方的安装方法。

      

     由于Sass文件先编译为CSS文件才能正常使用所以要进行编译

六．编译Sass

1. 命令行编译

        单文件转换命令：

         

         单文件监听命令（添加--watch命令）：

          

         多文件（文件夹）监听命令：

          

        逆向操作，css文件转换为sass/scss文件：

          

       2. GUI编译工具

          推荐国人自己开发的Koala工具，有中文版，上手也很简单

          第一步：添加我们要编译的项目文件，可通过第一区域的加号那个按钮添加，也可以直接将项目拖到第二个

     project区域。

          

             第二步：单击我们需要编译的文件，出现第四区域设置下该文件具体的编译方式，如果没什么特别的，直接用默认

      设置的就ok

              

            第三步：右键单击需要编译的文件，出现我们常用的几个操作：打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除。一般这里我们需要设置下我们输出文件的目录。

             

            第四步：键单击需要编译的文件，选择开始编译，编译成功会出现success

            

            此时就会发现文件夹中出现了一个.css文件

                     

       3. 使用hbuliderx插件转换

      1.安装插件：单机顶部工具选择安装插件，选择scss插件单机安装

      2. 等待安装完毕，在要转换的scss文件上右键，选择编译

            

      3. 编译成功会出现以下：

七． Sass的注释

       1. //我是单行注释

不会出现在编译之后任何格式的CSS文件中。

 

       2.  /*我是多行注释*/

只会出现在编译之后代码格式为expanded的CSS文件中

 

       3.  /*!我是强制注释*/

会出现在任何代码格式的CSS文件中。

八． 常用基本语法

 

• 变量：

变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引用。

                

         并且，变量的值也可以引用其他变量：

                

• 嵌套：

Sass支持选择器及属性嵌套，可以避免代码的重复书写。

 

       选择器嵌套：

           

       如果遇到对应于：hover的伪类，就需要用到 & 这个连接父选择器的标识符

           

          属性嵌套

            

• 代码重用（继承）：

        sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。
        使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

                

    .class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

               

 

•  计算功能：SASS允许在代码中使用算式

               

• 代码重用---Mixin混合器

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用

       

      无参数mixin声明及调用：

             

      有参数mixin声明及调用：

 可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。

           

       实际应用中关于CSS3浏览器兼容的mixin使用示例：

           

编译后：

          

         

• 颜色函数

Sass中集成了大量的颜色函数，让变换颜色更加简单直接。

          

      其他常见颜色函数：

        lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

• @import 引入

CSS中原本就有不常用的@import语法，但是有两个弊端：

 

1. 引入语句一定要卸载代码最前面才会生效；
2. 影响性能。如果A文件要引入B文件，当浏览器读到A文件时会再去下载B，阻塞进程。

 

而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来，也就是所有相关的样式会被编译到同一个CSS文件中，无需发起额外的请求。
当然，Sass的@import也支持导入远程的CSS文件。那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
一般来说基础的文件命名需要以'_' 开头，如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀，可写成@import "partial"。但是倒入CSS文件的话，就需要“文件名+后缀”了。

          

• 原生css的 引入

下列三种情况下会生成原生的CSS@import：

1. 被导入文件的名字以.css结尾；
2. 被导入文件的名字是一个URL地址（例如http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；
3. 被导入文件的名字是CSS的url()值。

注意：

不能用Sass的@import直接导入一个原始的CSS文件，因为sass会认为你想用CSS原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

十． 小结

    熟读了如上笔记。已经可以轻松地使用sass编写清晰、无冗余、语义化的css。，对于sass提供的工具已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。

    也已经学到了sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。

    不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让css变得更加可维护和语义化。最后，学习了与混合器相辅相成的选择器继承。继承允许声明类之间语义化的关系，通过这些关系可以保持css的整洁和可维护性。