为了账号安全,请及时绑定邮箱和手机立即绑定
把一个数变成百分比,挺重要的一个函数啊!为什么会觉得没有用呢?比如你想让某一列占屏幕的1/12,就可以通过percentage将它变成一个百分数
https://github.com/ww18/scssRealizeRenalbe/tree/master, 用简洁的方法实现了上面的功能,大家可以去看看,有更好的建议欢迎提出
To-upper-case() 函数将字符串小写字母转换成大写字母;
To-lower-case() 函数将字符串转换成小写字母。
区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数
$sizeType:bg md sm xs;
$fullwidth:100%;
@for $i from 1 through 12{
.col-#{nth($sizeType,1)}-#{$i},.col-#{nth($sizeType,2)}-#{$i},.col-#{nth($sizeType,3)}-#{$i},.col-#{nth($sizeType,4)}-#{$i}{
width:$fullwidth/12 * $i;
}
}
不知道这样是不是Bootstrape 的grid
sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。
很不错nice
$zips:zip(solid dashed dotted,1px 2px 3px,green blue red);
.test-zip {
content:length($zips);
}
@for $i from 1 to (length($zips)+1){

.test-#{$i}{
border:nth($zips,$i);
}
}
$str:blue,green,#fff,#000;
$ss:append((blue, green),red,comma);
$ff:append($str,#f00,space);
.test-app {
content:length($ff),$ss;
}
$joins: join(blue,(red orange),space);

$nth:$joins;

.test-join {

content:length($joins);

}

@for $i from 1 through (length($nth)) {

.test-#{$i}{

color: nth($nth,$i);

}

}
@mixin blockOrHidden($b:true){
@if $b{
background-color: aquamarine;
width: 500px;
height: 500px;
}
@else {
background-color: brown;
width: 500px;
height: 500px;
}
}

.divO{
@include blockOrHidden();
}

.divT{
@include blockOrHidden(false);
}
为什么前端的工资比大部分职业高?为什么有的人穷一辈子?如果学习web那么简单,随随便便就可以学好,想菜市场的白菜一样,竞争力哪来那么强?不想学的同学就省省吧,不要破坏其他同学的学习情绪。
我和楼下也有一样的感受
game over
这个函数在页面的配色中挺有用的
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消