美文网首页
Sass 学习

Sass 学习

作者: July_EF | 来源:发表于2017-01-22 09:46 被阅读117次

一、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的基本特性-运算

相关文章

  • Sass入门

    学习Sass(官网:Sass)之前需要了解什么是Sass,Sass全称:Syntactically Awesome...

  • Sass学习

    Sass学习 介绍 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 ...

  • 学习SASS

    css扩展语言 面向对象 变量 嵌套 混合 导入 安装Sass和Compass sass基于Ruby语言开发而成,...

  • sass学习

    sass重要特征 引入变量$highlight-color: #F90;

  • SASS学习

    今天上午将前端经典的一个框架学习了一下,通过官网以及一些教学视频初步走通了这个神奇的css框架。 window...

  • 学习 Sass

    Sass的使用 安装Ruby 安装Sass ( vscsde可以使用Live Sass Compiler 插件 ...

  • Sass 学习

    一、Sass安装(windows版) 1.在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,可...

  • Sass学习

    入门 基本用法 变量声明与引用 $ !default 保持sass条理性和可读性:嵌套、导入、注释 mixin,混...

  • sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,...

  • 如何将Sass编译成CSS

    本节我们来学习 Sass 的编译,我们写好的 Sass 代码,浏览器是不能识别的,Sass 只不过是作为一个预处理...

网友评论

      本文标题:Sass 学习

      本文链接:https://www.haomeiwen.com/subject/xupwbttx.html