css预编译之scss与less

      官网地址: http://lesscss.org/
      VSCode插件:Easy LESS
    
     官网地址: https://sass-lang.com/
      VSCode插件:Easy Sass
 
 语法:
  注释
//单行注释不会编译出来
/* 多行注释 会被编译出来*/
 
 
 
  变量
        less:
@number:123px;  
.box {
        width : @number;
    }  
        SCSS:
 
$number:123px;  
.box {
        width : $number;
    }  
 
 
插值
less:
    @key:margin;
    @i :3;
.box {
        @{key} : auto;
    }  
.box@{i} {           //.box3
        @{key} : auto;
    }  
scss:
 
$key:margin;  
.box {
        #{$key}:auto
    }  
 
 
作用域
    sass的作用域是有顺序的 向前看
    less 就近查找,如果内部有值 就不去外面查了
 
 选择器嵌套
正常css
// ul li{}
// ul li div{}
// ul li p{}
less
ul{
    list-style:none;
    li{
        float:left;
        div{ margin:10px;}
        p{ margin:20px;}
    }
}
scss
ul{
    list-style:none;
    li{
        float:left;
        div{ margin:10px;}
        p{ margin:20px;}
    }
 
伪类嵌套   &:hover
ul{
    list-style:none;
    li{
        float:left;
        div{ margin:10px;}
        p{ margin:20px;}
    }
    &:hover{   .. }
}
 
 
属性嵌套(只有Sass有)
font : {
            size : 10px;
            weight : bold;
            family : 宋体;
        }
 运算
less
@num : 100px;
 
 
.box4{
    width : @num * 3;
    height : @num + 10em;
    margin : 10em + @num;     //单位不同以第一个参数为准
    font : 20px / 1.5;
    padding : ~"20px / 1.5";   //~ 取消转义
    color : #010203 * 2;
}
 
sass
$num : 100px;
 
 
.box4{
    width : $num * 3;
    //Sass中如果单位不同的话,是不能运算
    //height : $num + 20em;
    font : 20px / 1.5;
    // 默认 / 是分割的操作
    padding : (20px / 1.5);  //()让他算!
    color : #010203 * 2;
}
单位,转义,颜色
 
  函数
.box5{
    width : round(3.4px);  
    height : percentage(0.2);
    margin : random();
    padding : sqrt(25%);   //sass没有
 
scss自定义函数
@function sum($n,$m){
    @return $n + $m;
}
 
 
.box5{
    width : round(3.4px);
    height : percentage(0.2);
    margin : random();
    padding : sqrt(25%);
    font-size : sum(4px , 5px);
}
 
 
  混入, (不同的css组合在一起)
less
.show{
    display : block;
}
.hide(@color){    //加()不渲染,只混入!
    display : none;
    color : @color;
}
.box6{
    width : 100px;
    .show;
    .hide(blue);
}
 
scss
@mixin show {
    display : block;
}
@mixin hide($color) {
    display : none;
    color : $color;
}
 
.box6{
    width : 100px;
    @include show;
    @include hide(red);
}
 
 
命名空间(Less),
#nm(){
    .show{ display: inline-block; }
}
 
.box7{
    #nm.show;
}
 
继承
less
.line{
    display : inline;
}
.box7{
    &:extend(.line);
}
.box8{
    &:extend(.line);
}
//.line.box7.box{display : inline;}
scss
%line{
    display : inline;
}
 
.box7{
    @extend %line;
}
.box8{
    @extend %line;
}
 
//.box7,.box8
 
合并
less   //+ 表示用,合并   +_表示用空格合并        
.box{
    background+ :url(a.png);
    background+:url(b.png);
    transform+_:scale(2);
    transform+_:rotate(30deg);
}
scss
$background:(
a:url(a.png),
b:url(b.png));
 
$tranform:(
    a:scale(2),
    b:rotate(30deg)
);
.box{
    backfground:map-values($background)
    transform:zip(map-values($tranform)...)
}
 
 
.box{
 
    background: url(),url();
    transform: scale(2) rotate(30deg)
}
 
媒体查询
.box10{
    width : 100px;
    @media all and ( min-width : 768px ){
        width : 600px;
    }
    @media all and ( min-width : 1440px ){
        width : 900px;
    }
}
 
条件
less
@count : 3;
.get(@cn) when ( @cn > 4 ){
    width : 100px + @cn;
}
.get(@cn) when ( @cn < 4 ){
    width : 10px + @cn;
}
.box11{
    .get(@count);
}
 
scss
$count : 3;
 
.box11{
    @if($count > 4){
        width : 100px + $count;
    }
    @else{
        width : 10px + $count;
    }
}
 
循环
 
less 利用递归的思想
@count2 : 0;
.get2(@cn) when (@cn < 3){
    .get2((@cn+1));
    .box-@{cn}{
        width: 100px + @cn;
    }
}
.get2(@count2);
scss
@for $i from 0 through 2{
    .box-#{$i}{
        width : 100px + $i;
    }
}
 
导入
less
@import ‘./reset.less‘;
cscc
@import ‘./reset.scss‘;
 
  

css预编译之scss与less

上一篇:使用 Thymeleaf开发Web页面


下一篇:微信公众号自动回复多图文(php)