sass的学习_html/css_WEB-ITnose

以前都没有怎么接触过sass,之后看到一个大牛写的前端知识系统结构图中看到了css预编译处理器中看到了这个神奇的东西.
其实虽然之前没有怎么听说它,但是用过,你还真别不信,之前在网易实习的一个学长在和我一起写的一个github pages项目中,推荐我
使用mcss(这是由网易大神编写的另一种css预编译器,当然了,当时并不知道这是一个什么东西,百度上也没有),mcss和sass的原理都是一样的,
而且有着及其相同的语法规则:

1.sass 和 scss的联系和区别
最初，sass是另一个预处理器haml的一部分[译注1]，而haml是使用ruby设计和开发的,它的语法是一种类似ruby的语法,没有大括号和双引号,更为重要的是,他有严格的缩进规则,只要有一处写错了缩进,就不会让你编译通过,例子:
$font-stack: helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

而scss是从第三版开始引进的,全名为sassy css,简写为scss,它的语法十分接近于我们使用的css,例如:
$font-stack: helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2.也就是说scss是sass的改进版和高级版.那么我们为什么要使用scss呢,原因有如下几点:
(1)css一直是作为一种美化页面的语言出现,sass在css中加入了变成的元素,使css成为了一种具有编程思想的语言
(2)能很清楚地知道父元素和子元素之间的关系,也就是减少了css中为了限制子元素,在子元素前面加上一大堆的父元素的前置限制,例如下的scss代码:
#button{
    width:400px;
    text-align: center;
    background: purple;
    
      a{
        text-decoration: none;
        color:red;
        font-size: 14px;
        font-weight: bold;
      }
}
通过sass编译之后,变成如下:
#button{
    width:400px;
    text-align: center;
    background: purple;
    
      a{
        text-decoration: none;
        color:red;
        font-size: 14px;
        font-weight: bold;
      }
}

代码结构变得十分清晰.
可以很容易地将多个sass文件合并成一个css文件,采用命令行的方式进行编译只要一行命令编译就ok.

3.sass的使用:
(1)安装sass,由于sass是由ruby写的,但是两者在语法中并没有多大的关联,即使不了解ruby,也可以直接使用sass.所以在安装sass之前必须确保你已经安装了ruby.由于我用的是ububtu系统,之前也装过ruby,所以直接一行命令如下就可以

gem install sass

几秒中之后就搞定了,除此之外,安装sass还有另外一种安装方式,使用git进行安装:

git clone git://github.com/nex3/sass.git
cd sass
rake install

通过使用sass -v可以测试是否安装成功

sass的基本语法可以详见http://www.th7.cn/web/html-css/201407/47710.shtml

4.sass的编译
一般建立的sass文件我们都是使用.scss作为文件的后缀名,然后进行编译,编译的方式如下:

编译单个文件

sass test.scss test.css
也可以设置输出css文件的风格

sass --style compressed test.scss test.css
输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

watch单个文件

sass --watch test.scss:test.css
watch文件夹

sass --watch src:dest

EasySite

零代码AI网站开发工具

下载