-
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
查看全部 -
1、Grunt 配置 Sass 编译的示例代码
2、Gulp 配置 Sass 编译的示例代码
查看全部 -
单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 这是对一个单文件进行编译，如果想对整个项目所有 Sass 文件编译成 CSS 文件，可以这样操作：多文件编译：sass sass/:css/
开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
查看全部 -
sass编译的方法
查看全部 -
几种安装sass的方法
查看全部 -
Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
先来看一个示例：
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color
SCSS 语法
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color;}编译出来的 CSS
body { font: 100% Helvetica, sans-serif; color: #333; }查看全部 -
sass用于清晰地、结构化地描述文件样式，是采用ruby语言编写的一款css预处理语言
查看全部 -
需要传变量的使用混合宏，不需要传变量的使用继承
查看全部 -
$col-width: 60px;
$col-gap: 20px;
@for $i from 1 through 12 {
.col-#{$i}{
width:$col-width*$i+$col-gap*($i - 1);
}
}
/*运行结果结果*/
.col {
width: 96px;
}
/*运行结果结果*/
.col-1 {
width: 60px;
}
.col-2 {
width: 140px;
}
.col-3 {
width: 220px;
}
.col-4 {
width: 300px;
}
.col-5 {
width: 380px;
}
.col-6 {
width: 460px;
}
.col-7 {
width: 540px;
}
.col-8 {
width: 620px;
}
.col-9 {
width: 700px;
}
.col-10 {
width: 780px;
}
.col-11 {
width: 860px;
}
.col-12 {
width: 940px;
}
查看全部 -
$list: twitter,facebook,github,weibo;
@for $i from 1 through length($list){
.icon-#{nth($list,$i)}{
background-postion: 0 - 20px * $i;
}
}
/*运行结果结果*/
.icon-twitter {
background-postion: -20px;
}
.icon-facebook {
background-postion: -40px;
}
.icon-github {
background-postion: -60px;
}
.icon-weibo {
background-postion: -80px;
}
查看全部 -
减法运算 减号两边要加 空格
$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;
.content{
width: $container - $sidebar-width - $gap-width;
float: left;
}
运行结果
.content {
width: 720px;
float: left;
}
查看全部 -
$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;
.container {
width: $sidebar-width+$content-width+$gap-width;
margin: 0 auto;
}
运行结果是：
.container {
width: 960px;
margin: 0 auto;
}
in是英寸。8in即8英寸。1英寸约=2.54厘米,1英寸大约是96像素width:20px+8in;8in=8*96px=768px即width=20px+768px=788px;查看全部 -
注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }查看全部 -
SassScript 支持 CSS 的两种字符串类型：
有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
@mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header");编译为：
body.firefox .header:before { content: "Hi, Firefox users!"; }需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。
查看全部 -
这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
//SCSS%mt5 { margin-top: 5px; }%pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5;} .block { @extend %mt5; span { @extend %pt5; } }编译出来的CSS
//CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
查看全部
举报