码迷,mamicode.com
首页 > 其他好文 > 详细

sass学习笔记

时间:2015-07-26 17:05:18      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:

 

在scss文件中使用@import。它不同于css中的@import。

 

css中的@import会有两个弊端:

1、必须放在代码的最前边

2、对性能不利

 

在scss文件中的@import使用CSS原生@import的既定规则

1、当@import 后面跟的是以.css文件结尾的时候

2、当@import 后面跟的是以http://开头的字符串

3、当@import 后面跟的是url()函数的时候

4、当@import 后面带有media queries的时候

scss都会认为你想使用原生css的@import

 

两个sass的既定规则

1、当@import 后面的文件没有后缀名的时候

sass会添加.scss或者.sass的后缀

2、同意目录下,局部文件和非局部文件不能重名

 

sass的变量操作

1、直接操作变量,即变量表达式

2、通过函数

1、跟代码块无关的函数,多是自己内置函数,称为functions

2、可重用的代码块,称为mixin

1、通过@include的方式调用

2、通过@extend的方式调用

以上两种方式都可以继承多个选择器

 

extend 不可以继承选择器序列

使用%,用来构建只用来继承的选择器

 

sass中的@media跟css的区别

sass中的@media query可以内嵌在css规则中

在生成css的时候

media query才会被提到样式的最高层级

好处:避免重复书写选择器或打乱样式表的流程

 

在嵌套的时候使用sass的at-root指令

明确指定被嵌套的内容输出到样式顶层

sass学习笔记

标签:

原文地址:http://www.cnblogs.com/huangcan/p/4677989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!