Less和Sass的使用

【Less中的变量】

1、声明变量：@变量名:变量值;

使用变量：@变量名

@length:100px;
@color:yellow;
@opa:0.5;

>>>Less中变量的类型：

①数字类：1 10px

②字符串：无引号字符串 red 有引号字符串 "haha"

③颜色类：red #000000 rgb()

④值列表类：用逗号或空格分隔10px solid red

>>>变量使用原则：多次频繁出现的值、需要修改的值，设为变量。

#div1{width: @length;height: @length;background-color: @color;opacity: @opa;.borderRadius;.setMargin(top_,10px);
}

2、混合(Mixins)

①无参混合

声明：.name{}; 选择器中调用 .name

②带参混合

无默认值声明：.name(@param){} 调用：.name(parValue);

有默认值声明：.name(@param:value){} 调用：.name(parValue); parValue可省

>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错

>>>无参混合，会在css中编译出同名的class选择器；有参的不会

3、Less的匹配模式

使用混合进行匹配，类似于if结构；

声明：.name(条件一,参数){} .name(条件二,参数){} .name(条件三,参数){} .name(@_,参数){}

.setMargin(top_,@width){margin-top: @width;
}
.setMargin(bottom_,@width){margin-bottom: @width;
}
.setMargin(@_,@width){padding: 10px;
}

调用：.name(条件值,参数值);

.setMargin(top_,10px);

匹配规则：根据调用时提供的条件值，去寻找与之匹配的"Mixins"执行。其中@_表示永远需要执行的部分。

4、Less中的运算

+ - * /

颜色计算时，红绿蓝分三组计算。组内可进位，组间互不干涉

【Less中的嵌套】

1、嵌套默认是后代选择器，如果需要子代选择器，则在子代前面加>

2、& 表示上一层，&:hover 表示上一层的hover事件

section{p{color: blueviolet;background-color: #00FFFF;text-align: center;}ul{padding: 0px;list-style: none;li{float: left;margin: 10px;width: 100px;border: 3px solid #00CED1;text-align:center; &:hover{background-color: cornflowerblue;color: white;}};}
}

【Sass中的变量】

1、声明变量：$变量名：变量值

2、变量在字符串中嵌套，需使用#{}包裹

border: #{$i}px solid red;

3、Sass中的运算：会将单位也进行运算。使用时需注意最终单位

10px*10px=100px*px

4、混合宏、继承、占位符

①混合宏：声明@mixin name($param:value){}

@mixin hong($color:yellow){color: $color;
}

　　　　　　　　　调用@include name(value);

@include hong;

>>>声明时可以有参，也可无参；可带默认值，也可不带；但是调用时必须符合声明规范，同less

>>>优点：可以传参

>>>缺点：会将混合宏中代码copy到对应的选择器中，产生冗余代码

②继承：声明：.class{}

.class{padding: 10px;
}

　　　　　　　　调用：@extend.class;

@extend .class;

　　　　>>>优点：继承的相同代码，可以提取到并集选择器；不会生成同名的class选择器

>>>缺点：无法进行传参

综上所述：当需要传递参数时，用混合宏；当有现成class时用继承；当不需要class时，用占位符

5、if条件结构

@if 判断条件{}

@else{}

6、for循环结构

@for $i from 1 to 10{} 不含10

@for $i from 1 through 10{} 包含10

@for $i from 1 through 4{.border#{$i}{border: #{$i}px solid red;}
}

　　7、while循环结构

$j:1,

@while 判断条件{}

$j:1;
@while $j<4{.while#{$j}{border:#{$j}px solid red;}$j:$j+1;
}

　　8、each循环遍历

@each $item in a,b,c,d{}

9、函数

@function func($name){}

@function func($length){$length:$length*5;@return $length;
}

　　【Sass中的嵌套】

1、选择器嵌套 ul{ li{} } 后代

ul{ >li{} } 子代

&表示上一层 div{ ul {li{ &=="div ul li" } } }

2、属性嵌套：属性名与{之间必须有: 例如 border:{color:red;}

3、伪类嵌套:ul{li{ &:hover{ "ul li:hover " } } }

section{p{color: #2173B6;background-color: #00FFFF;}ul{padding: 0px;list-style: none;li{float: left;width: 100px;text-align: center;margin: 10px;border: {color: #4E81BD;style:solid;width: 10px;};&:hover{background-color: #6495ED;color: white;}}}
}

转载于:https://www.cnblogs.com/dealblog/p/6792731.html

Less和Sass的使用相关推荐

sass文件编译的三种方式【舒】
[舒:]sass文件编译的三种方式方式一: 1.webstorm打开evtGulp项目或者mcake-activity项目 2.中,开启gulp->default/develop,启动watc ...
vue 项目配置sass
1.运行npm install node-sass --save-dev npm install sass-loader --save-dev 2.打开build文件夹下面的webpack.base. ...
mysql实现sass_使用sass绘制三角形
用border生成三角形的@mixin: // triangle @mixin triangle($direction, $size, $borderColor ) { content:"& ...
sass的继承，混合宏，占位符的用法总结
SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; }.block { @include mt(5px);span { display:block; @incl ...
Sass函数：Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...
Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
Vue 应用 Sass、Scss、Less 和 Stylus
Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass.Scss.Less预处理器.在创建项目的时候可以选择预处理器 (Sass/Less/Stylus). 如果当时没有选择,内置的 ...
VUE中使用sass
1.安装sass依赖包 (sass-loader依赖于node-sass) npm install --save-dev sass-loader npm install --save-dev node ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...

Less和Sass的使用

Less和Sass的使用相关推荐

最新文章

热门文章