什么是CSS
预处理器
CSS预处理器
定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS
文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS
代码编写过程的同时,它能让你的CSS
具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
CSS 预处理器
用一种专门的编程语言,进行 Web
页面样式设计,然后再编译成正常的 CSS
文件,以供项目使用。CSS 预处理器
为 CSS
增加一些编程的特性,无需考虑浏览器的兼容性问题。
CSS预处理器的种类
目前最主流的三个预处理器分别为:Sass
、 Less
和 Stylus
。
SASS
:2007年诞生,最早也是最成熟的CSS预处理器
,拥有ruby社区
的支持和compass
这一最强大的css框架
。Sass
默认使用.sass
扩展名。
现在的Sass
已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则(受LESS
影响)和CSS
一样采用了大括号({}
)作为分隔符。后一种语法规则又名SCSS
(SCSS
默认使用 .scss
扩展名),在Sass3
之后的版本都支持这种语法规则。
LESS
:2009年出现,受SASS
的影响较大,但又使用CSS
的语法,让大部分开发者和设计师更容易上手,在ruby社区
之外支持者远超过SASS
,其缺点是比起SASS
来,可编程功能不够,不过优点是简单和兼容CSS
,反过来也影响了SASS
演变到了SCSS
的时代,著名的Twitter Bootstrap
就是采用LESS
做底层语言的,Less
默认使用.Less
扩展名。
根据维基百科上的介绍,其实LESS
是Alexis Sellier受Sass
的影响创建的一个开源项目。当时SASS
采用了缩进作为分隔符来区分代码块,而不是CSS
中广为使用的大括号({}
)。为了让CSS
现有的用户使用起来更加方便,Alexis开发了LESS
并提供了类似CSS
的书写功能。
Stylus
:2010年产生,来自Node.js
社区,主要用来给Node
项目进行CSS
预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS
和LESS
,Stylus
默认使用.styl
扩展名。
Stylus
被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS
,以供浏览器使用。Stylus
同时支持缩进和CSS
常规样式书写规则。
预处理器语法一般包括:
- 变量
- 嵌套
- 混合Mixins
- 运算
- 导入 (Import)
- 函数
语法
CSS
预编译语言的语法都非常简单,如果你的编辑器给力的话,file watching
会自动找出语法错误。
语法上Sass3
、Scss
和Less
非常相似,旧版Sass
和Stylus
特殊一些,旧版Sass
我们就了解一下,Stylus
的语法更加灵活一些,功能也更强大一些。
例如
1、Sass
/*旧版sass语法*/
h1
color: #000
font-size: 24px
2、SCSS
/*scss语法*/
h1{
color: #000;
font-size: 24px;
}
3、LESS
/*less语法*/
h1{
color: #000;
font-size: 24px;
}
4、Stylus
/*Stylus语法的多样式*/
h1{
color: #000;
font-size: 24px;
}
h1
color: #000
font-size: 24px
h1
color #fff
font-size 24px
变量
/* 1、Scss的变量必须是$开始*/
$mainColor: #000;
h1{
color: $mainColor;
}
/* 2、Less 的变量名使用 @ 符号开始*/
@mainColor: #000;
h1{
color: @mainColor;
}
/* 4、Stylus 的变量名不要用 @ 开头, =赋值 */
mainColor = #000;
h1{
color: mainColor;
}
嵌套
如果你需要在CSS
中相同的parent
引用多个元素,你需要一遍一遍的去写parent
。用CSS预处理器
,就可以少些很多单词,而且父节点关系一目了然。
下面将不再介绍老版sass的写法,直接介绍scss写法。
同样生成
nav{
color: #000;
font-size: 16px;
}
nav a{
color: #0000cc;
font-size: 18px;
}
nav a.first{
color:red
}
/Scss、less、Stylus的嵌套,伪类嵌套都是使用&/ nav { color: #000; font-size: 16px; a { color: #0000cc; font-size: 18px; &.first { color: red; } } }
/Stylus的嵌套还可以这样写/ nav color #000 font-size 16px a color #0000cc font-size 18px &.first color red
[](https://shq5785.blog.csdn.net/article/details/114214033)Mixin混合
------------------------------------------------------------------
`Mixins`是`CSS预处理器`中语言中最强大的特性,简单点来说,`Mixins`可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。
平时你在写样式时肯定有碰到过,某段`CSS`样式经常要用到多个元素中,这样你就需要重复的写多次。在`CSS预处理器`语言中,你可以为这些公用的`CSS`样式定义一个`Mixin`,然后在你`CSS`需要使用这些样式的地方直接调用你定义好的`Mixin`。这是一个非常有用的特性,`Mixins`被当作一个公认的选择器,还可以在`Mixins`中定义变量或者默认参数。
`CSS预编译`工具允许我们将已有的 `class` 和 `id` 的样式应用到另一个不同的选择器上。 如:
/Scss、less混合语法/ .circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle } .big-circle{ width: 100px; height: 100px; .circle } /Stylus Mixin混合语法/ circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; circle } .big-circle{ width: 100px; height: 100px; circle }
### [](https://shq5785.blog.csdn.net/article/details/114214033)1、混入可以传递参数
/* 这是scss样例
- 改成less,只需要变$为@
- 改成Stylus,只需要.circle变为circle
*/
.circle($radius){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle(5px)
}
2、混入可带默认值
/* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle,:改为=
*/
.circle($radius:5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
.circle
}
/* 这是Stylus样例 */
circle($radius=5px){
border-radius: $radius;
background: #ccc;
}
.small-circle{
width: 50px;
height: 50px;
circle
}
运算
/* 这是Scss样例 */
$test:300px;
.test_01{
width: $test + 20px;//
height: $test*2 ;
color: #ccc - 10;
}
/* 这是Less样例 */
@test:300px;
.test_01{
width: @test + 20px;//
height: @test*2 ;
color: #ccc - 10;
}
/* 这是Stylus样例 */
test=300px
.test_01{
width: test + 20px;//
height: test*2 ;
color: #ccc - 10;
}
作用域(Scope
)
CSS预处理器
语言中的变量和其他程序语言一样,可以实现值的复用,同样它也存在生命周期,也就是Scope
(变量范围,开发人员习惯称之为作用域),简单点讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。
Sass
的作用域
Sass
中作用域在这三款预处理器是最差的,可以说在Sass
中是不存在什么全局变量。具体来看下面的代码:
/*Sass样式*/
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
先看转译出来的CSS样式:
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色(无全局变量概念)*/
}
示例明显的告诉我们,在Sass
样式中定义变量,调用变量是没有全局变量一个概念存在,因此在Sass
中定义了相同变量名时,在调用之时千万要多加小心,不然会给你的样式带来错误。
LESS
的作用域
LESS
中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡
一样,一级一级往下查找,直到根为止,同样上面的例子,我们来看看他在LESS
下所起的变化。
/*LESS样式*/
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
转译出来的CSS样式:
.scoped {
color:white;/*白色(调用了局部变量)*/
background-color:blue;
}
.unscoped {
color:black;/*黑色(调用了全局变量)*/
}
Stylus
的作用域
Stylus
虽然起步比较晚,但其作用域的特性和LESS
一样,可以支持全局变量和局变量。会向上冒泡
查找,直到根为止。
函数
Sass
、Less
和Stylus
都提供了丰富的内置函数,Stylus
更允许自定义函数,使用的时候自行查询吧。
导入
几种CSS预编译
语言的导入语法是相同的。与css3
的@import
看起来写法也相同,但css3
的@import
会引起异步加载。并不是我们期望的。
CSS预编译器
@import
解决了这个问题,它能将多个样式文件合并为一个,本质上是方便前端管理代码,并不会异步加载。
@import 'reset.scss' //scss中导入样式
@import "reset"; // less导入默认导入为less文件
@import "reset.css" // Stylus导入默认导入为css文件
循环语句
Sass
(Scss
),Stylus
支持循环语句
分支语句
Sass
(Scss
),Stylus
支持条件语句
拓展阅读
本文转自 https://shq5785.blog.csdn.net/article/details/114214033,如有侵权,请联系删除。