一些常用操作命令:
//.sass文件和.scss文件可以相互转换
sass-
convert
a.sass b.scss
//将sass文件编译成css文件
sass demo.scss product.css
//还可以设置css的输出风格
sass
--style compressed test.scss test.css
//输出样式的风格可以有四种选择,默认为nested
//nested:嵌套缩进的css代码
//expanded:展开的多行css代码
//compact:简洁格式的css代码
//compressed:压缩后的css代码
监听命令,实时刷新css:
//watch单个文件
sass --watch test.scss:test.css
//watch文件夹
sass --watch app/sass:
public
/stylesheets
1,Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }}
2,父选择器
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定
hover
样式时,或者当
body
元素有某个 classname 时,可以用
&
代表嵌套规则外层的父选择器。
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; }}
3,sass的@import指令会在编译阶段将import文件合并到当前的宿主文件中,sass提供了一个load_paths选项,用来添加额外的寻路路径。
sass的既定规则:
1,当没有文件后缀名的时候,sass会添加.scss或者.sass后缀
2,同一个目录下局部文件和非局部文件不能重名
4,@import "compass/reset",reset是sass提供的一个重置模块,html会有一个默认的样式,reset使得默认样式去掉。
温和的normalize重置掉不需要的样式,统一浏览器的初始样式。
5,使用css原生的@import的既定规则:
1,当@import后面跟的文件名是以css结尾时
2,当@import后面跟的是http://开头的字符串
3,当@import后面跟的是一个url()函数时
4,当@import后面带有media queries的时候
6,变量操作
1,直接操作变量,即变量表达式
2,通过函数
(1)跟代码块无关的函数,多是自己内置函数,成为functions
(2)可重用的代码块,成为mixin,解决样式复用
@include 使用时用复制拷贝的方式存在
@extend 使用时用组合声明的方式存在 ,继承其他选择器的样式,可继承多个样
式,连续继承。 1,不能继承选择器序列 2,使用%用来构建只用来继承的选择器
@mixin col-6 {
width: 50%;
float: left;
}
@mixin col-sm ($width: 50%) {
@if type-of($width) != number {
@error "$width必须是一个数值类型,你输入的width是: #{$width}.";
}
@if not unitless($width) {
@if unit($width) != "%" {
@error "$width应该是一个百分值,你输入的width是: #{$width}.";
}
} @else {
@warn "$width应该是一个百分值,你是入的width是: #{$width}.";
$width: (percentage($width)) / 100;
}
@media (min-width: 768px){
width: $width;
float: left;
}
}
7,sass的@media跟css区别:
1,sass中的media query可以内嵌在css规则中
2,在生成css的时候。media query才会被提到样式的最高层级
好处:避免重复书写选择器或者打乱样式表的流程
8,sass的at-root指令可在嵌套时使用,明确指定被嵌套的内容输出到样式表顶层
9,.main-sec {
font-family:$main-sec-ff;
//将@at-root的内容提到前面
@at-root{
.main-sec-headline {
font: {
family:$main-sec-ff;
size:16px;
}
}
.main-sec-detail {
font-size:12px;
}
}
}