预编译语言

预编译语言 Sass Less Stylus之间的区别

• Less是基于JavaScript，是在客户端处理的。其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS。
• Sass是基于Ruby，是在服务器端处理的。
• Stylus主要用来给Node项目进行CSS预处理支持。语法自由度很高。

了解 PostCSS

学习less

官网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;
}