Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Scss预处理器的使用总结

fozero 2019-02-22 01:45:00 阅读数:176 评论数:0 点赞数:0 收藏数:0

变量 、嵌套、Mixin混合、function函数、插值

变量及文件导入

通过$定义变量

$white:#fff;
$black:#000;

变量引用

.containner{
color:$black;
}

通常我们会单独创建一个局部scss文件来定义这些变量 例如 _varables.scss
varables前面的下划线用来区分这是局部文件,不会生成对应的css文件,通过@import方式在其他文件中导入该文件(下划线可以省略)

@import 'varables';

嵌套

例如我们有这样一个html结构

<div class="containner">
<div class="banner"></div>
</div>

使用嵌套语法可以写成:

.containner{
background: #eee;
color:$black;
.banner{
background: red;
}
}

最后编译成css:

.containner {
background: #eee;
color: #000; }
.containner .banner {
background: red; }

高级用法

&、>、+、~

使用&符合使得区分元素不以后代选择器的方式连接,例如链接使用到的hover效果

a{
color:red;
&:hover{
color:blue;
}
}

编译后

.containner a:hover {
color: blue; }

mixin混合

如果我们有多个地方使用到相同的样式,我们就可以将其写成一个mixin方法,然后在不同的地方去使用它

一般通过@mixin来定义一个函数,@include来引用

例如定义一个用于清除浮动的mixin方法

 @mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}

我们就可以这样使用

.list{
list-style: none;
@include clearfix();
.item{
float: left;
}
}

mixin方法传参

类似JavaScript函数我们可以传递参数

@mixin colorlink($normal, $hover, $visited){
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}

使用

@include colorlink(blue,red,green);

也可以使用这种方式,不用区分参数顺序

@include colorlink(
$normal: blue,
$visited: green,
$hover: red
);

设置默认参数值

通过以下方式来这是默认参数值

@mixin size($size:50px){
font-size: $size;
}

调用的时候我们可以根据需求来决定是否传递参数

.title{
// @include size();
@include size(20px);
}

@fuction和@mixin

区别:

  • sass本身就有一些内置的函数,方便我们调用,如强大的color函数,还有darken、rgba、ie-hex-str、percentage、lighten、length、nth、unit、unitless等
  • 其次就是它返回的是一个值,而不是一段css样式代码什么的

内置函数

1、rgba

rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

2、percentage

将一个没有单位的数字转成百分比形式

percentage(0.2) => 20%

通过@function来自定义函数

// px转em
@function pxToEm($px, $base: 16) {
@return ($px / $base) * 1em;
}

调用

p{
font-size:pxToEm(20);
}

解析

p{
font-size: 1.25em;
}

其他

1、插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量:

$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}

生成

p.foo {
border-color: blue; }

2、使用@for指令输出重复格式内容

@for $i from 1 through 28
{
.bg-#{$i}
{
background: url(brand_day_review#{$i}.jpg) no-repeat center / 1560px auto;
}
}

生成

.containner .bg-1 {
background: url(brand_day_review1.jpg) no-repeat center/1560px auto; }
.containner .bg-2 {
background: url(brand_day_review2.jpg) no-repeat center/1560px auto; }
.containner .bg-3 {
background: url(brand_day_review3.jpg) no-repeat center/1560px auto; }
.containner .bg-4 {
background: url(brand_day_review4.jpg) no-repeat center/1560px auto; }
.containner .bg-5 {
background: url(brand_day_review5.jpg) no-repeat center/1560px auto; }

除了@for,其他的还有@if 、@each、@while等,这些都属于控制指令

参考阅读

sass中文网
组织你的Sass文件
sass揭秘之@mixin,%,@function
Sass基础——Rem与Px的转换

版权声明
本文为[fozero]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/fozero/p/10416170.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领