Sass-学习笔记

Posted 2020-09-23 xing.org1^

1：定义

Sass是css预处理器的一种，也是最早的css预处理语言。Sass采用Ruby语言编写，为css增加一些编程的特性，无需考虑浏览器的兼容性问题。

编程特性指：可以在css中使用变量、简单地逻辑程序、函数等等在编程语言中的一些基本特性

但是，sass无法兼容已有的css代码。即sass可以推导成css，css没变法反变回去之前的sass。

2：其他一些css预处理器

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

 3：关于Sass和SCSS之间的不同

Sass和SCSS其实是同一种东西，平时都称之为Sass。二者其实有不同

两个区别点如下

（1）.文件扩展不同。

　　Sass用“.sass”后缀为扩展名；

　　SCSS用“.scss”;

（2）.语法书写方式不同。

　　Sass以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”。

　　SCSS的语法书写和CSS语法书写方式非常类似。

示例如下：

Sass语法——

$font-stack: Helvetica,sans-serif      //定义变量

$primary-color: #333    //定义变量

 

body

　　font: 100% $font-stack

　　color: $primary-color

 

SCSS语法——

$font-stack : Helvetica, sans-serif；

$primary-color: #333；

 

body{

　　font: 100% $font-stack；

　　color: $primary-color；

}

 

二者编译出来的css都是

body{

　　font： 100% Helvetica, sans-serif；

　　color： #333；　　

}

接下来学习的都是使用的SCSS语法方式

 4：Sass和CSS的写法差别：

正如Sass和SCSS的区别一样，

css和SCSS的书写方式无差别；甚至可以把现有的css文件直接改为“.scss”都可以直接使用。

css和Sass的区别也是一样的！

Sass是基于Ruby写出来的，延续了Ruby的书写规范。

书写Sass的时候不带有大括号和分号，其主要的依靠严格的缩进方式来控制;

而css就是有大括号和分号，必不可少；而且缩进方式没有那么严格的要求，甚至可以不用缩进。

代码示例：

Sass写法

body

　　color： #fff

　　background： #fff

 

css写法

body{

　　color:：#fff；

　　background： #fff；

}