首页 > Web开发 > 详细

css预编译之scss与less

时间：2021-03-16 11:35:38      阅读：29      评论：0      收藏：0      [点我收藏+]
      官网地址： 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

原文：https://www.cnblogs.com/zhuangdd/p/14541693.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！