我们先来解决在工作中可能会遇到跟sass有关的几个问题:
问题一:如果在编译sass的时候出现 zsh: command not found: sass
则可以运行下面的命令:
先用下面的命令去查找
where is sass
将文件加入到环境变量中去
export PATH=$PATH":/Library/Ruby/Gems/2.0.0/gems/sass-3.4.22/bin/"
执行这条命令
source /etc/profile
问题二:.vue文件中 sass 的使用识别问题
如图:webpack中虽然可以编译,但是在 webstorm 中报语法错误,强迫症的我无法接受,请问怎么解决呢?
首页,你可以尝试下面这样写,看能不能解决。
因为有可能是语法的问题,我们上面图片中用的是scss的语法,不是sass的语法,所以可以修改一下style标签试试。
另外,这个问题是在webstorm上出现的,那么,我们也可以通过配置webstorm来解决这个问题。具体为:
1,settings>Editor>Language Injections里面有5个内建的,可以参考一下,增加一项,选择第3个xml tag injection,name为这个配置名字 随便起。
2,Language选项中id请选择你想要用的 如scss。
3,XML Tag选项中Local name为style(匹配style标签)。
4,Namespace好像不选也没事(反正我照着css那个配置选了xhtml那个)
Advanced选项中XPath condition中写@lang='scss'(和上面的联合匹配style中lang属性为scss的内容区域)
问题三,.vue文件里引入第三方js和样式文件(sass,less,css)
话不多说,我们可以直接看下面这篇文章,介绍的很详细。
http://www.jianshu.com/p/c58f4af69304
问题四,如果要在scss文件中,输入中文的话,需要写上
@charset "UTF-8";
下面是我整理了一些SASS中比较常用的代码,主要是为了用的时候方便查找,仅供参考。
CSS不是一种编程语言,你可以用它开发网页样式,但没法用它编程。在程序员眼里,CSS它没有变量,没有条件语句,只是一行行单纯的描述。有人就开始为CSS加入编程元素,这被叫做“CSS预处理器”(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
SASS是Ruby语言写的,使用前必须先安装Ruby,然后再安装SASS。
1,安装
npm install sass
2,使用
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
2.1 使用命令行编译scss
单文件转换命令
sass style.scss style.css
单文件监听命令
sass --watch style.scss:style.css
sass --watch scss/main.scss:css/main.css
文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
选择生成哪种style样式的命令
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
● --style表示解析后的css是什么格式,有四种取值分别为:nested,expanded,compact,compressed。
● nested:嵌套缩进的css代码,它是默认值。
● compressed:压缩后的css代码。
● compact:简洁格式的css代码。
● expanded:没有缩进的、扩展的css代码。
● --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
● --debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。
3,在前端后端分离项目中使用sass
3.1 如果报错说sass-loader 或者 node-sass 找不到,看了下模板里的webpack文件,有可能是因为根据定义的lang去找对应的webpack loader,
于是运行npm install node-sass sass-loader --save就好了。
4,常用的一些语法
4.1 变量
$red: #f00;
$width: 200px;
p {
color: $red;
}
.test { width: $width; }
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
font-family: $fontStack;
color: $primaryColor;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
如果变量需要镶嵌在字符串之中,就必须写在#{}之中。
$side: left;
.rounded {
border-#{$side}-radius: 5px;
}
4.2 计算功能
body {
margin: ( 14px/2 );
top: 50px + 100px;
right: $var * 10%;
}
4.3 嵌套
div {
h1 {
color: red;
}
}
属性也可以嵌套,比如border-color属性:
p {
border: {
color: red;
}
}
注意,border后面必须加上冒号。
又比如在 Sass 中我们可以这样写:
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写:
.box {
border: {
top: 1px solid red; bottom: 1px solid green;
}
}
伪类嵌套:在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
.clearfix{ &:before,
&:after {
content:""; display: table;
}
&:after {
clear:both; overflow: hidden;
}
}
编译出来的 CSS:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
4.4 注释
sass共有两种注释风格:
标准的css注释 /* comment /,会保留到编泽后的文件。
单行注释 // comment,只保留在sass源文件中,编译中会忽略。
在/后面加一个!,表示这是“重要注释”。即使压缩模式的编译,也会保留这段注释。通常可以用于声明版权信息。
/*!
重要注释!
*/
5, 继承
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size: 120%;
}
.message {
border: 1px solid #ccc;
padding: 10px; color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
6,Mixin (宏)
使用@mixin命令,定义一段代码块:
不带参数的混合宏:
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin
div {
@include left;
}
mixin带参数并有默认值:
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
下面传多个参数的mixin的实例,用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius:10px){
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候,可以像下面这样调用:
#navbar li {
@include rounded(top, left);
}
#footer {
@include rounded(top, left, 5px);
}
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
编译后会变成这样:
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
7,占位符% placeholder
占位符% placeholder 可以取代以前CSS中的基类造成的代码冗余的情形。因为% placeholder声明的代码,如果不被@extend调用的话,不会产生任何代码:
%mt5{
margin-top: 5px;
}
%pt{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
8,插入文件
@import命令,用来插入外部文件
@import 'path/filename.scss';
如果插入的是.css文件,则等同于css的import命令
@import 'foo.css';
@import根据文件名引入。默认情况下,它会寻找Sass文件直接引入,但是,在少数几种情况下,它会被编译成CSS的@import规则,例如:
● 文件的扩展名是 .css。
● 文件名以 http:// 开头。
● @import 包含了任何媒体查询(media queries)。
如果没有扩展名,Sass将试着找出具有.scss或.sass扩展名的同名文件并将其引入。
例如:
@import "foo.scss"
或
@import "foo";
也可以通过一个@import引入多个文件,例如:
@import "rounded-corners", "text-shadow";
如果你有一个SCSS或Sass文件需要引入,但是又不希望它被编译为一个css文件,就可以在文件名前面加一个下划线,就能避免被编译。这将告诉Sass不要把它编译成CSS文件。
9,条件语句
@if可以用来判断
p{
@if 1+1 == 2 { border: 1px solid; }
@if 5 < 3 {border: 2px dotted; }
}
配套的还有@else命令
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
10,循环语句
sass支持for循环
@for $i from 1 to 10 {
.border-#{$i}{
border: #{$i}px solid blue;
}
}
支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i : $i -2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member}{
background-image: url("/image/#{$member}.jpg");
}
}
11,自定义函数
SASS允许用户编写自己的函数:
@function double($n) {
@return $n *2;
}
使用:
#sidebar {
width: double(5px);
}