Scss起步 1.Ruby安装
gem sources –add https://gems.ruby-china.com/ –remove https://rubygems.org/ gem install sass gem install compass sass -v （查看当前版本）
2.Node安装
全局安装
npm i node-sass -g
#使用 node-sass 源文件 目标文件 -w –output-style compressed PHPStorm配置FileWatcher：
node-sass \(FilePath\) \(FileDir\)/\(FileNameWithoutAllExtensions\).css
// 对应的包管理工具设置node-sass 的镜像源,这里以npm为例 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass // 重新安装node-sass包 npm install node-sass
3.编译sass //单文件转换命令 node-sass input.scss output.css //单文件监听命令 node-sass –watch input.scss:output.css //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录： node-sass –watch app/sass:public/stylesheets
基础知识 1.Sass 语法格式 .scss.sass 2.Sass 编排格式 nested 编译排版格式 /命令行内容/ sass style.scss:style.css –style nested /编译过后样式/ .box { width: 300px; height: 400px; } .box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式 /命令行内容/ node-sass style.scss:style.css –style expanded /编译过后样式/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } compact 编译排版格式 /命令行内容/ node-sass style.scss:style.css –style compact /编译过后样式/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } compressed 编译排版格式 /命令行内容/ node-sassstyle.scss:style.css –style compressed /编译过后样式/ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px} 文档阅读笔记 #{} \(name: foo; \)attr: border; p.#{\(name} { #{\)attr}-color: blue; }
@import @import “foo.css”; @import “foo” screen; @import “http://foo.com/bar"; @import url(foo);
@extend .error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url(”/image/hacked.png“); } .seriousError { @extend .error; border-width: 3px; }
@if、@else、@elseif、@for、@each、@while
\(type: monster; p { @if \)type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
} }
@for \(i from 1 through 3 { .item-#{\)i} { width: 2em * $i; } }
\(i: 6; @while \)i > 0 { .item-#{\(i} { width: 2em * \)i; } \(i: \)i - 2; }
@mixin和@include类似函数声明和函数调用。
scss函数 1.默认参数 @mixin scroll(\(height:10px,\)width:10px) { /* 滚动条样式 */ &::-webkit-scrollbar {
-webkit-appearance: none;
background: transparent;
width: $width !important;
height: $height !important;
} }
css转scss 基于工具：https://csspre.com/convert/、http://css2sass.herokuapp.com/
问题总结 1.scss不转换 今天遇到自定义的css变量中，使用scss变量或者函数是，不会被编译（例如rgba函数、或者一个变量编译成css后没有变化）。
最终的解决办法就是使用插值语法。我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式；
\(borderDirection: top !default; \)baseFontSize: 12px !default; \(baseLineHeight: 1.5 !default; // 应用于 class 和属性 .border-#{\)borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
} // 应用于复杂的属性值 body {
font:#{$baseFontSize}/#{$baseLineHeight};
}
