关闭

Sass学习笔记。

标签: css
178人阅读 评论(0) 收藏 举报
分类:

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的默认变量一般是用来设置默认值,然后根据需求来覆盖的,只需要在默认变量之前重新声明下变量即可。)默认变量的价值在进行组件化开发的时候会非常有用。
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

《Java JDK8学习笔记》读书笔记(4)

第4章 认识对象 学习目标  区分基本类型与对象类型  了解对象与引用的关系  从打包器认识对象  以对象观点看待数组  认识字符串的特性
  • mouyong
  • mouyong
  • 2016-04-18 20:10
  • 4383

【静下心学习Unity】学习笔记 (一)简介

静下心好好学习Unity3D,不再无脑制作Demo。基础扎实才是王道。——来自刚受实习挫折准备好好学习的孙子旭
  • sun15980
  • sun15980
  • 2016-04-10 18:58
  • 1736

Linux学习笔记之——起始篇

摘要:学习笔记目录、方便以后回顾、没有什么捷径可走、不断的记录、总结、练习、coding、coding。
  • chenghuaying
  • chenghuaying
  • 2014-03-31 16:47
  • 4496

Sass入门学习笔记

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

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

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

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

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

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

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

SASS学习笔记

CSS的预处理器主要有两种(LESS、SASS),今天来说一下SASS,顺便记录下来,方便日后查阅
  • github_38104179
  • github_38104179
  • 2017-03-28 20:16
  • 46

sass学习笔记

代码示例/*mixin*/ @mixin borderRadius($value){ -webkit-border-radius:$value; -moz-border-radius:$val...
  • zch681990
  • zch681990
  • 2016-08-01 17:47
  • 256

前端学习笔记-SASS的使用

1. SASS简介 学过CSS的人都知道,它不是一种编程语言,你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。...
  • qq_34210183
  • qq_34210183
  • 2017-07-12 20:19
  • 314
    个人资料
    • 访问:1643次
    • 积分:167
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类