scss !global关键字
关键字用来提升局部变量的权限,将局部变量提升到全局
scss 中的运算
!default关键字
插值
@function指令
less,sass,styus三者的区别
Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css,所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理:条件、循环等,而 Less 需要通过When等关键词模拟这些功能,这方面 Less 比不上 Sass 和 Stylus
Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less,可能它不会像现在这样被广泛应用(个人愚见).
---1嵌套,三种很相似
.a {
&.b {
color: red;
}
}
---2变量
less @开头
sass $开头
stylus中没有前缀
---3嵌套
三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别,甚至连引用父级选择器的标记 & 也相同
---4继承
Sass和Stylus的继承非常像,能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始,后面接被继承的选择器。Stylus 的继承方式来自 Sass,两者如出一辙。
Less 则又「独树一帜」地用伪类来描述继承关系;(下边有讲解)
5作用域
---sass中不存在全局变量,重命名的会替代全局的变量
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
/*==================编译后======================*/
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色(无全局变量概念)*/
}
less与stylus的作用域跟javascript十分的相似,首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到根为止。
6混入
---Sass声明mixins时需要使用@mixin,后面紧跟mixin的名,也可以设置参数,参数名为变量$声明的形式。
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
---less混合的用法是指将定义好的ClassA中引入另一个已经定义的Class,也能使用够传递参数,参数变量为@声明。
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
/*==================编译后======================*/
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
---stylus中的混合和前两款Css预处理器语言的混合略有不同,他可以不使用任何符号,就是直接声明Mixins名,然后在定义参数和默认值之间用等号(=)来连接。
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 调用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 调用error mixins,并将参数$borderWidth的值指定为5px */
}
7插值变量
SCSS.scss插值的写法为#{$ },具体情况如下图所示:
LESS.less插值的写法为@{ }形式,具体情况如下图所示:
8导入@Import中的变量插值
Sass 中只能在使用 url() 表达式引入时进行变量插值
$device: mobile;
@import url(styles.#{$device}.css);
Less 中可以在字符串中进行插值
@device: mobile;
@import "styles.@{device}.css";
Stylus 中在这里插值不管用,但是可以利用其字符串拼接的功能实现
device = "mobile"
@import "styles." + device + ".css"
代码模块化
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
scss安装
npm i sass-loader -D
npm install node-sass --save-dev
less继承
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
// ---
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}