webpack编译 less scss语法

目录

less

嵌套、&、 变量

运算

 混合

方法

内置方法

条件语句

作用域

插值

sass

编译

嵌套语法 &符号

属性嵌套

变量 $key: value;

运算

混合  @mixin   @include

继承 @extend

引入文件 @import

插值语法 #{$key}

条件语句 @if {} @else {}

循环语句 @for

while循环

枚举循环 @each $i in 枚举体 {}

三元运算符

---

less

嵌套、&、 变量

直接在一个选择器中使用另一个选择器并书写样式

内外选择器同时保留

通过&符号获取当前选择器

// 变量  less
@color: red;
@bg: pink;
@fz: 14px;


.box {
    color: chocolate;
    .box1 {
        a {
            font-size: @fz;
            color: red;
            // 嵌套的时候，我们可以通过&符号获取当前选择器
            &:hover {
                color: orange;
            }
        }
        &:hover {
            color: @color;
        }
    }
}

.box {
  color: chocolate;
}
.box .box1 a {
  font-size: 14px;
  color: red;
}
.box .box1 a:hover {
  color: orange;
}
.box .box1:hover {
  color: red;
}

运算

less支持数学运算，并且会做单位转换

加减法：保留第一个加数或者被减数的单位（有一个单位就保留，两个不同单位保留第一个）

乘法：保留第一个乘数的单位（有一个单位就保留，两个不同单位保留第一个，数字做运算的结果，加上单位）

除法：保留第一个单位了

 混合

为了复用选择器的样式，支持：类混合和id混合

less中的混合在编译的时候保留（变量会删除），混合继承的样式不会合并选择器

// less中
.demo {
    padding: 10px;
    a {
        font-size: 20px; 
    }

    #test {
        width: 100px;
    }

    .cls {
        color: orangered;
    }
}

// css中
.demo {
  padding: 10px;
}
.demo a {
  font-size: 20px;
}
.demo #test {
  width: 100px;
}
.demo .cls {
  color: orangered;
}

// less
.msg {
    // 直接使用
    .demo;
}

// css
.msg {
  padding: 10px;
}
.msg a {
  font-size: 20px;
}
.msg #test {
  width: 100px;
}
.msg .cls {
  color: orangered;
}

// less 使用混合 只能用id和类混合，还要加上命名空间
.box {
    // 加上命名空间，可以使用  id混合
    .demo #test;
    
    // 加上命名空间，可以使用  类混合
    .demo .aa;

    // 即使加上命名空间 也不能使用混合中的标签样式
    // .demo a;   报错
}

// css
.box {
  width: 100px;
  height: 100px;
  color: red;
}

方法

// 定义方法
.size(@w, @h) {
    width: @w;
    height: @h;
}

// 使用
.msg {
    .size(100px, 100px)
}

// 定义方法实现元素的居中  定义了默认参数
.wcenter(@w: 500px, @mt: 0, @mb: @mt) {
    width: @w;
    margin: @mt auto @mb;
}

// 使用方法
.box {
    border: 1px solid #ccc;
    // 如果使用默认参数 可以不传递参数
    .wcenter();   
    // 如果传递参数 则使用传递的参数
    .wcenter(1000px, 30px);
}



.box {
    .wcenter()!important;   // 方法中 每条样式都加important
}

通过@arguments获取所有的参数

!important：如果对方法使用!important关键字，此时方法中的每一个样式都会提高权重

内置方法

e 避免less编译的,用于对 CSS 的转义，已经由 ~"value" 语法代替。

它接受一个字符串作为参数，并原样返回内容，不含引号。它可用于输出一些不合法的 CSS 语法，或者是使用 LESS 不能识别的属性。

// 使用方法 避免编译
.box {
    // 已被代替
    width: e("30px / 2");
    // 使用~""
    height: ~"20px / 10px";
}


// css中
.box {
  width: 30px / 2;
  height: 20px / 10px;
}

定义色彩方法：rgb， rgba， hsl(hue, saturation, lightness)，hue 色相 0-360 saturation 饱和度 0-100% lightness 亮度 0-100%

rgba  通过十进制红色、绿色、蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。

色彩通道方法 red，green, blue, alpha, hue, saturate, lightness,从颜色对象中提取对应通道值。

// 色彩通道方法
background-color:  rgb(90, 129, 32);
// 从颜色对象中提取对应通道值。
background-color: red(rgb(10, 20, 30));
background-color: green(rgb(10, 20, 30));
background-color: blue(rgb(10, 20, 30));
background-color: alpha(rgb(10, 20, 30));

数学方法

.box {
    // 数学方法
    // ceil向上取整
    width: ceil(1.5px);
    width: ceil(1.1px);
    // floor向下取整
    width: floor(1.9px);
    // round四舍五入
    width: round(1.5px);
    // max 获取最大值
    width: max(10px, 20px, 30px);
    // min 获取最小值
    width: min(10px, 20px, 30px);
    // percentage 百分数
    width: percentage(0.05);
}

色彩操作方法 fadeIn, fadeOut, fadeTo, saturate, desaturate, lighten, darken, 最小值是0，最大值是100%；

.box {
    // 定义局部变量
    @color: hsla(200, 50, 50, .5);

    // 色彩操作方法 
    color: fadeIn(@color, 20);
    color: fadeout(@color, 20);
    color: saturate(@color, 30);
    color: darken(@color, 40);
}



//  css中
.box {
  color: hsla(0, 0%, 100%, 0.7);
  color: hsla(0, 0%, 100%, 0.3);
  color: hsla(0, 0%, 100%, 0.5);
  color: hsla(0, 0%, 60%, 0.5);
}

条件语句

且条件 .方法名称() when () and () {}

非条件 .方法名称() when not () {}

在less中，所有的方法，只要条件满足，都会执行，并且后执行的会覆盖先执行的

.size(@w: 60px, @h: 50px) {
    width: @w;
    height: @h;
}

// 条件语句
.size(@w: 50px, @h: 50) when (@w < 100px) {
    background-color: pink;
}
.size(@w: 50px, @h: 50) when (@w > 100px) and (@w < 200px) {
    background-color: blue;
}
.size(@w: 50px, @h: 50px) when (@w = 100px) {
    background-color: orange;
}

.box {
    .size();

    .size(100px);

    .size(300px);
}

作用域

变量

全局的变量，任何模块都能使用

局部的变量，当前模块可以使用，其它模块无法使用

混合

全局的混合，任何模块都能使用

局部的混合，当前模块可以使用，其它模块无法直接使用，但是可以通过命名空间使用

方法

全局的方法，任何模块都能使用

局部的方法，当前模块可以使用，其它模块无法直接使用，但是可以通过命名空间使用

插值

有三种情况下可以使用插值语法

1 在字符串中可以使用插值

2 在选择器上可以使用插值

3 在样式属性名称上（key）可以使用插值

// 定义变量
@day: '周三';
@num: 2;
@dir: top;
@space: 20px;

// 在less中，有三种情况下可以使用插值语法
	// 1 在字符串中可以使用插值
	// 2 在选择器上可以使用插值
	// 3 在样式属性名称上（key）可以使用插值


.box:after {
    // 支持字符串中来使用插值语法
    content: '今天是@{day}';
}

// 在选择器上可以使用插值
.num-@{num} {
    color: red;
}

// 在样式属性名称上（key）可以使用插值
.box1 {
    border-@{dir}: 1px solid #ccc;
    padding: @space;
}

sass

编译

命令行编译

-C 避免输出缓存文件

--sourcemap=none 避免输出suorcemap文件

例如：scss .\demo.scss ./\demo.css -C --sourcemap=none

工程化编译sass

对webpack来说sass文件也是资源，是资源我们就可以模块化打包加载

// 通过commonjs进行配置
module.exports = {
    // 配置环境
    mode: 'development',
    // 入口文件
    entry: './modules/main.js',
    // 出口配置
    output: {
        filename: './bundle.js'
    },
    // 加载机
    module: {
        // 规则
        rules: [
            // sass加载机
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    }
}

嵌套语法 &符号

//  scss
.box {
    .box1 {
        a {
            text-decoration: none;
            color: blue;
            &:hover {
                color: red;
            }
        }
    }
}

//  css
.box .box1 a {
  text-decoration: none;
  color: blue; }

.box .box1 a:hover {
    color: red; }

属性嵌套

// scss  缩进很重要
.demo {
    border: {
        top: 1px solid red;
        right: 2px solid green;
        bottom: 3px solid yellow;
        left: 4px solid blue;
    }
}

// css
.demo {
  border-top: 1px solid red;
  border-right: 2px solid green;
  border-bottom: 3px solid yellow;
  border-left: 4px solid blue; }

变量 $key: value;

不支持声明前置，局部变量的作用域是当前模块，外部无法使用

// 全局变量
$color: red;

// 花括号中 局部变量
.msg {
    $width: 100px;
}

.demo {
    // 使用全局变量
    color: $color;

    // 不可以使用局部变量
    width: .msg $width;
}

运算

加减法:运算时候会做单位转换。保留是第一个加数或者被减数的单位

乘法：只能有一个乘数带单位

除法：默认不会执行除法。在css中，font属性的属性值可以是字号比行高，所以/默认不执行除法想执行除法，必须满足三个条件之一

1 必须有()

2 必须出现变量或者方法的返回值

3 是表达式的一部分（除了除法，还有其它的运算）

如果被除数有单位，除数单位可有可无，有单位单位抵消。

如果被除数没有单位，除数一定不能有单位

// 加减乘除运算
.msg {
    // 加法运算  保留是第一个加数单位 做了单位转换和运算
    width: 10px + 10px;
    width: 10px + 20;
    width: 10 + 30px;
    // 两个单位不同
    width: 1in + 1px;
    width: 1px + 1in;

    // 减法  保留是第一个减数单位 做了单位转换和运算
    width: 10px - 1px;
    width: 1in - 1px;
    width: 1pt - 1px;

    // 乘法 只能有一个乘数带单位
    width: 1px * 1;
    width: 1in * 1;

    // 除法
    // 想执行除法，必须满足三个条件之一
    // 1 必须有() 	(常用的方式)

    // 如果被除数有单位，除数单位可有可无
    width: (10px / 5);
    
    // 有单位单位抵消。
    width: (10px / 5px);

    // 如果被除数没有单位，除数一定不能有单位
    width: (10 / 2px);

    // 2 必须出现变量或者方法的返回值
    // 定义局部变量
    $sapce: 20px;
    width: $sapce / 2;
    width: max(10px, 20px, 30px);
    width: min(10px, 20px, 30px);

    // 3 是表达式的一部分（除了除法，还有其它的运算)
    width: (10px + 10px) / 2;

    // 色彩运算
    // 定义局部变量
    $color: #666777;
    $color1: #777a12;
    $color2: rgba(100, 200, 200, 0.5);
    $color3: rgba(50, 100, 150, 0.5);
    $color4: rgba(50, 100, 150, 0.6);

    // 运算
    color: $color + $color1;

    color: $color2 - $color3;
    // 不同的透明度无法进行运算
    color: $color2 - $color4;
}

混合  @mixin   @include

不支持声明前置

// 定义混合
@mixin hunhe() {
    width: 100px;
    height: 100px;
}

.msg {
    // 使用混合
    @include hunhe;
}

// 定义混合
@mixin hlh($h:10px) {
    height: $h;
    line-height: $h;
}

.msg {
    // 使用混合 使用默认值 可以省略参数集合
    @include hlh;
}

// 定义新的混合
@mixin hlh($h:10px) {
    height: $h;
    line-height: $h;
}

.msg {
    // 如果传递了参数 就使用传递的参数
    @include hlh(50px);
}

 在sass中获取剩余参数, 使用三个点语法

@mixin boxShadow($arg...) {
    -webkit-box-shadow: $arg;
    -moz-box-shadow: $arg;
    -o-box-shadow: $arg;
    -ms-box-shadow: $arg;
    box-shadow: $arg;
}

继承 @extend

支持类  id  标签  自定义元素名称选择器, (跟less中的混合是一样的)

1 继承的选择器在编译的时候会保留

2 编译的时候，合并了选择器，而不是复制样式，相对来说效率更高

.demo {
    width: 100px;
}
#test {
    height: 100px;
}
a {
    color: red;
}
hello {
    background-color: pink;
}


// // 使用继承
.msg {
    // 通过@extend使用
    @extend .demo;
    @extend #test;
    @extend a;
    @extend hello;
}


//  css  是并集
.demo, .msg {
  width: 100px; }

#test, .msg {
  height: 100px; }

a, .msg {
  color: red; }

hello, .msg {
  background-color: pink; }

如果不想在编译的时候保留选择器样式，我们可以使用选择器占位符%.(id选择器和类选择器无法使用)

我们在选择器前面添加%占位符，此时该选择器在编译的时候会删除

// 我们在选择器前面添加%占位符，此时该选择器在编译的时候会删除
    // 注意: id选择器和类选择器无法使用占位符
// %.demo {
//     width: 100px;
// }
// %#test {
//     height: 100px;
// }

%a {
    color: red;
}
%hello {
    background-color: pink;
}


// // 使用继承
.msg {
    // 通过@extend使用
    // 如果添加了占位符 使用的时候也要加上占位符
    // 注意: id选择器和类选择器无法使用
    // @extend %.demo;
    // @extend %#test;
    @extend %a;
    @extend %hello;
}


// css 
.msg {
  color: red; }

.msg {
  background-color: pink; }

局部继承。局部渲染规则（有意想不到的结果，所以工作中不建议使用局部的继承 ）

a {
    b {
        c {
            d {
                color: blue;
            }
        }
    }
}

e {
    f {
        g {
            h {
                @extend d;
            }
        }
    }
}


//  css
a b c d, a b c e f g h, e f g a b c h {
  color: blue; }

引入文件 @import

// 引入文件有两种方式
// 	@import url(url)	css引入方式（编译的时候保留） sass中不支持
@import url('./base.scss');
 
// 	@import url			sass引入方式（编译的时候删除) 支持的
@import './base.scss';

插值语法 #{$key}

// 跟less一样，sass中的插值有三种用法
// 1 在字符串中插值 字符串的拼接
div:after {
    content: '今天是' + '#{$day}';
}

// 2 在选择器上插值
.num-#{$num} {
    color: red;
}
 
// 3 在属性名称上插值
.demo {
    border-#{$dir}: 1px solid #ccc;
}

条件语句 @if {} @else {}

@if $dir == 'top' or $dir == 'bottom' {
        border-top-width: $l;
        border-bottom-width: $l;
    } @else {
        border-left-width: $l;
        border-right-width: $l;
    }

// 定义循环变量
$i: 0;
// // 使用while循环 每隔三个改变一次颜色
@while $i < 5 {
    .item#{$i} {
        background-color: skyblue;
    }
    // 改变循环变量
    $i: $i + 3;
}

//  css
.item0 {
  background-color: skyblue; }

.item3 {
  background-color: skyblue; }

循环语句 @for

@for $i from start through end {}

@for $i from start to end {

@for $i from 1 through 10 {
    .item#{$i} {
        font-size: $i + px;
    }
}


//  css
.item1 {
  font-size: 1px; }

.item2 {
  font-size: 2px; }

.item3 {
  font-size: 3px; }

.item4 {
  font-size: 4px; }

.item5 {
  font-size: 5px; }

.item6 {
  font-size: 6px; }

.item7 {
  font-size: 7px; }

.item8 {
  font-size: 8px; }

.item9 {
  font-size: 9px; }

.item10 {
  font-size: 10px; }

to不包括最后一次的值
@for $i from 1 to 10 {
    .item#{$i} {
        font-size: $i + px;
    }
}

.item1 {
  font-size: 1px; }

.item2 {
  font-size: 2px; }

.item3 {
  font-size: 3px; }

.item4 {
  font-size: 4px; }

.item5 {
  font-size: 5px; }

.item6 {
  font-size: 6px; }

.item7 {
  font-size: 7px; }

.item8 {
  font-size: 8px; }

.item9 {
  font-size: 9px; }

while循环

// 定义循环变量
$i: 0;
// // 使用while循环 每隔三个改变一次颜色
@while $i < 5 {
    .item#{$i} {
        background-color: skyblue;
    }
    // 改变循环变量
    $i: $i + 3;
}

枚举循环 @each $i in 枚举体 {}

// 循环一个没有规律的聚合数据，我们可以使用枚举循环
@each $c in 'pink', 'red', 'green' {
    .item-#{$c} {
        background-color: #{$c};
    }
}


// css
.item-pink {
  background-color: pink; }

.item-red {
  background-color: red; }

.item-green {
  background-color: green; }

三元运算符

if(condition, trueValue, falseValue)

condition值为真，结果是truevalue

condition值为假，结果是falsevalue

// 三元表达式
.box {
    width: if(true, 100px, 200px);
    height: if(false, 100px, 200px);
}