学习Sass

Posted 2020-07-19 amy01

一、什么是sass?

      写过css的都知道，css是用来改变页面样式的。但它不是一种编程语言，没有变量，函数，继承等功能，只能一条条抒写样式语句很死板。在这个工具决定效率的时代，这是不能容忍的事情。怎样将css也通过编程的方式来实现呢？sass就应运而生了。sass也被称为“css预处理器”，其抒写风格和css相似，同时具有动态语言的特点，可减少很多重复的代码。经过编译可生成标准的css文件。

二、安装sass

      sass是Ruby语言编写的（两者的语法没有关系别担心不懂ruby），所以必须先安装Ruby，再安装sass。

      安装完Ruby后，在计算机开始程序中找到并打开其命令窗口，输入 

gem install sass

根据提示查看是否安装成功。若不成功，参考以下其他安装Ruby的方法，里面有详细步骤。

三、使用sass

3.1 .scss和.sass

      二者都是sass文件的后缀名，区别在于抒写格式不同。.sass文件，不使用大括号和分号

body
    background-color: #fff
    font-size: 14px
div
    margin:auto
    width:100px

　   .scss文件，与我们平时抒写css的格式类似，使用大括号和分号。从习惯上来说肯定是.scss文件好用啦。

body {
    background-color: #fff;
    font-size: 14px;
}   
div {
    margin:auto;
    width:100px;
}   

3.2  sass转化为css

假设在e盘建立一个名为sass的文件夹e:\sass，在其中新建一个demo.scss文件，内容如下：

$myColor:#ccc;

#page{   
    color: $myColor;
    font-size: 18px;    
}

在命令行窗口中使用如下命令可在e:\sass下生成demo.css文件   

sass e:\sass\demo.scss

demo.css内容如下：

#page {
    color: #ccc;
    font-size: 18px; }

若要指定生成的css文件名和路径，如将生成的文件命名为example.css保存在f盘根目录下，输入以下命令

sass e:\sass\demo.scss  f:\example.css

另外还可以指定编译后的css风格：

sass --style compressed demo.sass  demo.css

有四种编译风格

    * nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

3.3 文件导入

      在scss中也可通过@import导入外部文件，与CSS的导入略有不同的是，编译时会将@import的scss文件合并只生成一个CSS文件。但是若导入的是.css文件则不会合并还是以@import形式存在，与普通CSS导入样式文件效果一样。

例如：在demo.scss文件中导入sDemo.scss文件和cDemo.css文件，二者内容分别如下：

//sDemo.scss
body{
    background-color: #ffffff;
}

//cDemo.css
  div{
    width: 100px;
  }

demo.scss内容：

@import "sDemo.scss";
@import "cDemo.css";*/
$myColor:#ccc;

#page{
    color: $myColor;
    font-size: 18px;   
}

将demo.scss文件编译后生成demo.css文件内容如下：

@import url(cDemo.css);
body {
  background-color: #ffffff; }

#page {
  color: #ccc;
  font-size: 18px; }

3.4 文件监听

     scss文件更改后都需要执行一次编译命令后才可生成css文件，通过监听一个文件或路径可实现scss文件更改后自动编译。

    // 监听文件
　　sass --watch demo.scss:output.css
　　// 监听路径
　　sass --watch e:\sass\demo.scss

3.5 注释

  两种注释：单行注释// 和多行注释/*.....*/

       双斜杠：单行注释，编译后不会输入到css中。

       多行注释：注释可以输入当css中。

如在demo.scss中添加注释如下，注意中文注释会提示gbk错误，解决办法是在文件开头增加@charset "utf-8"

@charset "utf-8";
@import "sDemo.scss";
@import "cDemo.css";
$myColor:#ccc;
//我是单行注释
#page{
    //this is comment
    color: $myColor;
    font-size: 18px;   
}
/*我是多行注释*/

编译后的demo.css内容如下：

@charset "UTF-8";
@import url(cDemo.css);
body {
  background-color: #ffffff; }

#page {
  color: #ccc;
  font-size: 18px; }

/*我是多行注释*/

 

以上是今天学习sass的一个总结，旨在记录和强化知识点。学习要从点滴做，起坚持写博客，记录自己学习的过程。

其他语法内容参见如下链接：

1.http://www.ruanyifeng.com/blog/2012/06/sass.html

2.http://www.css88.com/doc/sass/#using-sass