-
[Sass]数据类型
数字
字符串
颜色
布尔型
空值
值列表
查看全部 -
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示
查看全部 -
插值#{}
$flag:"status";
@extend %update-#{$flag};
查看全部 -
if we need to transfer variables.it is suitable to use @mixin
2. using extend cannot transfer variables.
3. It is best to use %placeholder, because when we do not call it, it will not create code.
查看全部 -
“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
查看全部 -
从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：
.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }查看全部 -
[Sass]占位符 %placeholderxa
先%，后@extend，编译出来的代码会将相同功能code put together so as to reducing redundancy.
查看全部 -
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
查看全部 -
[Sass]混合宏的参数--传多个参数
有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：
$shadow... // shadow需要多个值，比如长宽高颜色
查看全部 -
@mixin 可以设置一个带值或者不带值的参数
调用带值的参数方法，可以直接 @include border-radius; //不用加（）结尾
同样，即使带值，也可以将值覆盖，@include border-radius(3px);
查看全部 -
声明用@mixin
调用用@include
查看全部 -
[Sass]混合宏-声明混合宏
如果是变量，用$就够了；
如果是重复使用大段的样式，那么就要使用@mixin来声明，有三种类型：
不带参数；
带参数；
复杂，即带有逻辑关系，如@if @ else
查看全部 -
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。
查看全部 -
注意区分&符的位置，置前表示它为父集，置后代表它为子集
父会一层一层，爬到顶的父；子会一级一级往下走，走到底
查看全部 -
nav { a { color: red; header & { color:green; } } }查看全部
举报