Sass学习笔记。

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的默认变量一般是用来设置默认值,然后根据需求来覆盖的,只需要在默认变量之前重新声明下变量即可。)默认变量的价值在进行组件化开发的时候会非常有用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值