-
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种:
选择器嵌套
属性嵌套
伪类嵌套
查看全部 -
只有满足所有下述标准时方可创建新变量:
该值至少重复出现了两次;
该值至少可能会被更新一次;
该值所有的表现都与变量有关(非巧合)。
查看全部 -
!global 和 !default 对于定义变量都是很有帮助的。
查看全部 -
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }
编译后的css代码:
body{ line-height:2; }
可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。查看全部 -
来看一个简单的示例,假设你的按钮颜色可以给其声明几个变量:
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;
如果值后面加上!default则表示默认值。
查看全部 -
调试
在 Sass3.3 版本之上(我测试使用的版本是 3.4.7),不需要添加这个参数也可以:
sass --watch style.scss:style.css
查看全部 -
在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
查看全部 -
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。
查看全部 -
开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
查看全部 -
单文件编译:
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作:
多文件编译:
sass sass/:css/
上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。
查看全部 -
Sass 的编译有多种方法:
命令编译
GUI工具编译
自动化编译
查看全部 -
//Welcome to imooc learning Sass
$red-color:red;
.box{
color:$red-color;
}
查看全部 -
//welcome to imooc learn Sass
$width:200px;
$height:300px;
body{
width:$width;
height:$height;
}
Sass是之前的版本?现在叫SCSS,所以它们是一样的东西
查看全部 -
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可
查看全部 -
使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。
查看全部
举报