Sass学习笔记。

原创 2017年10月13日 14:19:05

Sass:

  定义:css预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。(采用RuBy语言编写的一款css预处理语言)
  扩展名:.sass(严格的缩进式语法)     .scss(与平时css语法书写类似) scss和css写法无差别,这也是Sass后来越来越受大众喜欢原因之一。

Sass编译

方法:

  1. 命令编译(我喜欢)
  2. GUI工具编译
  3. 自动化编译(Grunt和Gulp)

命令编译:

  单文件编译
        sass(要编译的Sass文件路径)/style.scss:(要输出css文件路径)/style.css

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

开启”watch”功能,这样只要你的代码进行任何修改,都能自动监测到代码的变化,并且给你直接编译出来:

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

Sass常见的编译错误

  1. 字符编码引起的(不支持”GBK”编码,设置为”UTF-8”)
  2. 路径中的中文字符(不要使用中文字符命名文件目录名)

不同样式风格的输出方法:

 1.嵌套输出方式 nested
 2.展开输出方式 expanded     命令行最后加 -- style expanded
 3.紧凑输出方式 compact
 4.压缩输出方式 compressed

Sass普通变量与默认变量

普通变量:定义之后可以在全局范围内使用。
默认变量:sass的默认变量仅需要在值后面加上!default即可。
(Sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,只需要在默认变量之前重新声明下变量即可。)默认变量的价值在进行组件化开发的时候会非常有用。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Sass入门学习笔记

  • 2016-03-08 16:01
  • 966KB
  • 下载

Sass学习笔记(二) @rules,判断与遍历,@each, @mixin

紧接上篇,sass高阶 @rules @directive 判断 遍历 @each @mixin @extend可以扩展类,在新类中的首行使用@extend .error; 包括复杂的伪类,类的组合等...

CSS预处理器——SASS学习笔记(二)

Sass的控制命令 1. @if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除...

Sass的学习笔记

阅读目录 一. Sass安装     1.1 Ruby安装     1.2 运行gem命令     1.3 安装Sass 二. Sass基本用法     2.1 导入...

sass学习笔记

代码示例/*mixin*/ @mixin borderRadius($value){ -webkit-border-radius:$value; -moz-border-radius:$val...

sass 学习笔记(一):嵌套,变量,operation。。。基本就是翻译了一遍官网

在sublime 2下安了一个sass高亮插件。下载地址在这里。解压后直接放到data的packages下面。官网在此sass基础: 1、 嵌套。selector 和 property 都可以嵌套。2...

SASS学习笔记

CSS的预处理器主要有两种(LESS、SASS),今天来说一下SASS,顺便记录下来,方便日后查阅

【笔记】sass

sass入门 1、可以定义变量 2、嵌套 3、导入其他sass文件,最后编译为一个CSS文件 4、@mixin定义一些代码片段,且可传参数。@include 5、@extend组合代码声明 ...

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景

相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐。
  • kgsew
  • kgsew
  • 2014-12-12 14:22
  • 830

sass+compass笔记系列2--compass模块

记录一下compass中的模块,在此之前先补充一下@import规则。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)