SassScript 支持 CSS 的两种字符串类型：
有引号字符串 (quoted strings)，如 "wanjunshijie" 、'https://wanjunshijie.com'；
无引号字符串 (unquoted strings...
yekong
3年前 (2021-08-18)
喜欢
Scss 和 JavaScript 语言类似，也具有自己的数据类型，在 Scss 中包含以下几种数据类型：
数字: 如，1、 2、 13、 10px；
字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
颜色：如，...
yekong
3年前 (2021-08-18)
喜欢
在 Sass 中注释有两种方式
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
//定义一个占位符
%mt5 {
margin-top: 5px;
}
/*调用一个占位符*/
.box ...
yekong
3年前 (2021-08-18)
喜欢
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
...
yekong
3年前 (2021-08-18)
喜欢
Scss 中的占位符 %placeholder 功能
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @ex...
yekong
3年前 (2021-08-18)
喜欢
在 Scss 中是通过关键词 “@extend”来继承已存在的类样式块
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
back...
yekong
3年前 (2021-08-18)
喜欢
Scss混合宏的不足之处是会生成冗余的代码块。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
marg...
yekong
3年前 (2021-08-18)
喜欢
Scss混合宏可以传多个参数
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-to...
yekong
3年前 (2021-08-18)
喜欢
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用默认值
.btn {
@include border-radius;
}
...
yekong
3年前 (2021-08-18)
喜欢
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
调用传值
.box {
@include border-radius(3px);
}
...
yekong
3年前 (2021-08-18)
喜欢
