Sass和Less（预处理器）「建议收藏」开发者社区

Sass和Less（预处理器）「建议收藏」

@number:123px;
$number:123px;
/* 普通变量声明：直接用 $ 声明 变量执行顺序是自上而下，当下面对变量重新赋值时，会用下面的新值 */
$width:200px;
$width:100px;
/* 默认变量：在后面添加 !default 变量在执行的时候，不会根据位置执行，执行不是默认变量的值 */
$width:230px;
$width:300px !default;
/* 全局变量和局部变量 在局部变量后添加 !global ，局部变量作用域为全局变量 */
$color:red; #div1{ 
    color: $color;  //使用全局变量，结果 red
    // $color:orange;  //局部变量，结果是 orange
   $color:orange !global; //添加 !global 后，局部变量 变成全局变量，div2的值为 orange .box{ 
        background-color: $color;   //在本作用域下颜色是 orange
#div2{ 
    background-color: $color;//
}

此代码由Java架构师必看网-架构君整理
/* 选择器嵌套 */
#div3{ 
    width: 300px;
    .name{ 
        color: aqua;
        background: azure;
        // & 父类元素选择器，添加伪类选择器
        &：hover{ 
            color: blue;
}

/* 函数 */
$colors:(light:white,dark:black);	//map映射
//根据key获取值
@function color($key){ 
    @if not map-has-key($colors,$key){ 
        //警告@warn不会中断 sass 监听
        @warn  "在映射中没有#{$key}这个键";
        //错误@error 会中断 sass 监听
        @error "在映射中没有#{$key}这个键";
    @return map-get($colors,$key);
//使用函数color
body{ 
    background: color(light);
}

此代码由Java架构师必看网-架构君整理
/* 混合：@mixin 名称{} 引用混合： @include 名称 */
//无参混合
@mixin clear { 
    width: 100px;
#div4{ 
    @include clear;
//有参混合
@mixin col($color:red,$border:1px solid black) { 
    background: $color;
    border:$border ;

Sass和Less（预处理器）「建议收藏」

Sass和Less（预处理器）「建议收藏」

Sass和Less（预处理器）

一、了解Sass和Less

二、Sass和Less 语法

2.1 注释

2.2 语法

赋值

插值

作用域

选择器嵌套、伪类嵌套、属性嵌套（Sass）

运算

函数

混合、命名空间（Less）、继承