作者:L-壹_413 | 来源:互联网 | 2023-08-15 10:45
1.什么是预处理器?CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。
1.什么是预处理器?
CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。
可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些特性,可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。
例如:
$color : red ; //使用了变量$color
.test {
color : $color ;
}
2.CSS预处理语言:
▶Sass(SCSS)
▶LESS
▶Stylus
▶Turbine
▶Swithch CSS
▶CSS Cacheer
▶DT CSS
到目前为止,在众多优秀的CSS预处理语言中,就属Sass、LESS和Stylus最优秀。
3.什么是Sass?
Sass官网的描述是:Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通CSS更强大的功能。Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
Sass是采用Ruby语言编写的一款CSS预处理语言。有着和HTML一样的缩进风格。
4. Sass和SCSS有什么区别?
Sass和SCSS其实是同一种东西,两者的区别有:
▶文件扩展名不同:Sass是以".sass"后缀为扩展名,而SCSS是以".scss"后缀为扩展名。
▶语法书写方式不同: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% Helvetica , sans-serif;
color : #333;
}
编译出来的CSS
body {
font : 100% Helvetica , sans-serif;
color : #333;
}