预编译语言 Sass Less Stylus之间的区别
- Less是基于JavaScript，是在客户端处理的。其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS。
- Sass是基于Ruby，是在服务器端处理的。
- Stylus主要用来给Node项目进行CSS预处理支持。语法自由度很高。
了解 PostCSS
学习less
- npm install -g less
- lessc style.less style.css
嵌套规则
操作
- LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
转义
- 〜“some_text"中的任何内容将显示为 some_text
p {
color: ~"green";
}
函数
- 如圆函数，floor函数，ceil函数，百分比函数等。
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
命名空间和访问器
- 它用于将mixins分组在通用名称下。 使用命名空间可以避免名称冲突，并从外部封装mixin组。
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
变量范围
- 变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索。
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
导入
@import "//www.w3cschool.cn/less/myfile.less";
@import (less, optional) "custom.css";
变量
- @变量名：变量值
扩展
-
&是父级选择器的引用 - Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。
h2 {
&:extend(.style);//给.style加上extend所在父级的样式
font-style: italic;
}
.style {
background: green;
}
//编译后
h2 {
font-style: italic;
}
.style,
h2 {
background: green;
}
.style:extend(.container, .img)
{
background: #BF70A5;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
混合
- Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。
.p1{
color:red;
}
.p2{
background : #64d9c0;
.p1();
}
.p3{
background : #DAA520;
.p1;
}
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #DAA520;
color: red;
}
混合参数
- 参数mixin使用一个或多个参数，通过参数和其属性来扩展LESS的功能，以便在混合到另一个块时自定义mixin输出。
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
将规则集传递给Mixins
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Mixin Guards
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
CSS Guards ???
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope=global) {
background-color: red;
color: black;
}
.style when (@usedScope=mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
.style {
background-color: blue;
color: white;
}
循环
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
