标签:Sass sass less color Less mixin my class CSS
less基于nodejs编写
sass用ruby写的,用node-sass包解决编译问题
less中变量用@
less中定义mixin
.block
使用:
lessc
命令编译less文件方法:
mixin”属性只能基于现在已有的样式规则!你可以在mixin中使用类选择器和id选择器:
.a,#b{
color: rebeccapurple;
}
.mixin-class{
.a();
}
.mixin-id{
#b();
}
输出:
.a,
#b {
color: rebeccapurple;
}
.mixin-class {
color: rebeccapurple;
}
.mixin-id {
color: rebeccapurple;
}
注意,当调用mixin时,括号是可选的:
.a() //此种写法和下面写法无区别
.a;
不输出的 mixin:
如果你想创建一个mixin,但你不想让mixin在生成css中输出,你可以在它后面加上括号 () :
.my-mixin{
color: black;
}
.my-other-mixin(){
background: wheat;
}
.class{
.my-mixin;
.my-other-mixin;
}
输出:
.my-mixin {
color: black;
}
//此处并没有输出 .my-other-mixin
.class {
color: black;
background: wheat;
}
less
中的extend
:
这里有一个叫block的mixin
:
less中如果多个地方都引用mixin
:
那么最终生成的css里面就会很很多重复的代码:
如果mixin
中代码很多,那么最终生成的重复代码就更多,我们显然不希望这样,解决方案:
使用
extend
结果:
公共样式被提取出来放在一个地方了
单独的样式也有
less
中的loop
循环
看一个例子,原理是递归:
结果:
less模块化
sass中变量用$
sass的mixin
写法和less不太一样:
首先sass的
mixin
必须显示的用@mixin
申明,另外mixin
的名字前面不加点,比如这里是
@mixin block, 不能写成@mixin .block
Less中的mixin看起来既是一个class,又是一个mixin
sass使用上,引用时候需要加上@include
node-sass
命令行编译使用方法
sass
中,这样用extend:
sass
中的loop
循环
sass通过递归写一个网格布局,注意sass中引用变量用#{$n}
,less中引用变量用@{n}
但是!!!!!!!!!!!!!!!
其实sass不必这么麻烦,因为sass支持for循环啊!
sass模块化
总结:
CSS预处理器框架
标签:Sass,sass,less,color,Less,mixin,my,class,CSS 来源: https://blog.csdn.net/dyw3390199/article/details/113864093
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。