Sass 学习

一、Sass安装(windows版)

1.在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。

在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况)

2.安装Sass

通过命令安装  gem install sass

查看Sass版本  sass -v

更新Sass版本  gem update sass

卸载(删除)Sass  gem uninstall sass

二、Sass的语法格式及编译调试..

语法

sass 有两种, 以下都是以 scss为主 文件后辍为  *.scss  此语法格式与css语法更相似!更易学习

Sass编译

Sass 的编译有多种方法:

1、命令编译

----单文件编译:

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

------多文件编译

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法:

在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

当然,使用 sass 命令编译时,可以带很多的参数:

2、GUI工具编译

对于 GUI 界面编译工具,目前较为流行的主要有:

Koala (http://koala-app.com/)

Compass.app(http://compass.kkbox.com/

Scout(http://mhs.github.io/scout-app/

CodeKit(https://incident57.com/codekit/index.html

Prepros(https://prepros.io/

相比之下,我比较推荐使用以下两个:

Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)

CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

3、自动化编译

喜欢自动化研究的同学,应该都知道GruntGulp这两个东东 ,自行学习 此处就不再介绍

[Sass]常见的编译错误

在编译 Sass 代码时常常会碰到一些错误,让编译失败。这样的错误有系统造成的也有人为造成的,但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。

[Sass]不同样式风格的输出方法

众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:

嵌套输出方式 nested

在编译的时候带上参数“--style nested”:

sass --watch test.scss:test.css--style nested

展开输出方式 expanded

在编译的时候带上参数“--style expanded”:

sass --watch test.scss:test.css--style expanded

紧凑输出方式 compact

在编译的时候带上参数“--stylecompact”:

sass --watch test.scss:test.css--stylecompact

压缩输出方式 compressed

在编译的时候带上参数“--stylecompressed”:

sass --watch test.scss:test.css--stylecompressed

三 、Sass的基本特性-基础

变量: 以$ 符号开始

普通变量  $color;

默认变量  sass 的默认变量仅需要在值后面加上 !default 即可。

sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;

$baseLineHeight: 1.5!default;

body{   

line-height: $baseLineHeight;

}


编译后的css代码:

body{

line-height:2;

}

可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

理解全局变量和局部变量

http://www.sassmeister.com/ 在线学习sass的网站

嵌套 

选择器嵌套

属性嵌套

伪类嵌套

混合宏

在 Sass 中,使用“@mixin”来声明一个混合宏。

使用一个关键词“@include”来调用声明好的混合宏

注意:带参数的混合宏 如果有更多参数  可以使用“...” 来代替

[Sass]扩展/继承

通过关键词 “@extend”来继承已存在的类样式块

[Sass]占位符 %placeholder

Sass 中的占位符%placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。

[Sass]混合宏 VS 继承 VS 占位符

[Sass]插值#{}  /*并不是很理解插件,待详细学习后更新*/


使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分

[Sass]注释

注释对于一名程序员来说,是极其重要,良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式,我暂且将其命名为:

1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”

2、类似 JavaScript 的注释方式,使用“//”

两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示,

[Sass]数据类型

Sass 和 JavaScript 语言类似,也具有自己的数据类型,在 Sass 中包含以下几种数据类型:

数字: 如,1、2、13、10px;

字符串:有引号字符串或无引号字符串,如,"foo"、'bar'、baz;

颜色:如,blue、#04a3f9、rgba(255,0,0,0.5);

布尔型:如,true、false;

空值:如,null;

值列表:用空格或者逗号分开,如,1.5em 1em 0 2em、Helvetica, Arial, sans-serif。

四、Sass的基本特性-运算

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,306评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,657评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,928评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,688评论 0 220
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,105评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,024评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,159评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,937评论 0 212
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,689评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,851评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,325评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,651评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,364评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,192评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,985评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,154评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,955评论 2 279

推荐阅读更多精彩内容

  • 安装运行 1.下载ruby并安装 2.安装之后打开命令行执行gem命令,检查是否已经安装好 安装完ruby之后,在...
    wshining阅读 677评论 0 1
  • 什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变...
    陈小陌丿阅读 450评论 0 0
  • Sass学习 介绍 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 ...
    践行者阅读 373评论 1 4
  • 花儿会开 蝴蝶会来 蝶恋花依旧有人写 然而 花太香 于是招惹了什么 花有刺 于是伤害到了什么 花会疼 可是它太香了...
    江行攸阅读 119评论 0 1
  • 时间久了,慢慢你就会发现,聊天只有“嗯”、“好的”,好朋友之间聊的也都是过去的事,为你的状态评论点赞的也剩下那么固...
    谁许谁诺love阅读 213评论 0 0