sass核心知识点

sass 核心知识点

1、什么是CSS预处理器,什么是Sass

(1) CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。

(2) Sass是一种最早出现的“CSS预编译处理器”,        进行网页样式设计,然后再编译成正常的CSS文件。     Sass提供了许多便利的写法,大大节省了设计者的时间,     使得CSS开发,变得简单和可维护

2、Sass与SCSS有什么区别      sass后缀名为sass,是sass的老式语法,不使用大括号和分号进行缩进;   scss后缀名为scss,使用大括号和分号进行缩进,是sass的新式语法。      建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

3、Sass/SCSS和纯CSS对比  CSS没有语句,无法编程,只是单纯的描述

4、了解sass前世和它安装的前提条件

(1)sass 是基于ruby来发明的 这也决定了他前期的语法结构类似ruby的严格缩进的风格 

(2)我们想利用sass语言 必须要安装ruby的安装包  以ruby为开发环境 来编写sass

(3) 在ruby环境下使用 gem install sass(网络安装方式)                        gem install 本地sass安装包的路径

5. sass的编译

(1)命令编译          sass .scss:.css

(2)GUI图形化界面操作编译         koala   (特别注意:)注意ruby 和 koala 安装目录下的核心配置文件的编码格式 为“UTF-8”

6、输出方式    nested:嵌套缩进的css代码,它是默认值。  expanded:没有缩进的、扩展的css代码。  compact:简洁格式的css代码。  compressed:压缩后的css代码。

7、普通变量与默认变量      普通变量:  $变量名:值;      默认变量:  $变量名:值 !default;

8、局部变量和全局变量    核心内容: 变量名称相同下  局部变量称之为全局变量的影子,            局部变量只在局部区域覆盖全部变量。

9、嵌套:    选择器嵌套, 属性嵌套, 伪类嵌套

10、混合宏的声明、调用、参数

(1)@mixin:声明混合宏的关键字 

(2)@include:调用混合宏的关键字

(3)混合宏的传参有三种写法

11. 只传变量名,调用的时候再去传值

12. 变量直接在混合宏中赋值

13. 基于前两种我们也可以传多个参数  注意“ ... ”

14、Sass扩展/继承    继承关键字:@extend 继承特点: 为了减少冗余的css代码

15、占位符    占位符声明关键字:%placeholder 特点:不被继承就不会编译成css代码

16、插值    声明插值的关键语法 #{} 特点:Sass 获得一个更好的结构体系。       比如说你想写更干净的、   高效的和面向对象的 CSS。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • [toc] 前言 本文所有的演示都是基于Win10操作系统。 关于Sass 1.定义 Sass的学名叫“CSS预处...
    崔小叨阅读 18,449评论 0 78
  • 1、什么是CSS预处理器,什么是Sass(1) CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,...
    Devour_z阅读 560评论 0 0
  • 1、什么是CSS预处理器,什么是Sass **(1) **CSS 预处理器用一种专门的编程语言,进行 Web 页面...
    ConRon阅读 279评论 0 0
  • 1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑...
    恰皮阅读 106,470评论 20 105
  • 北方有佳人,绝世而独立。 一顾倾人城,再顾倾人国。 宁不知倾城与倾国?佳人难再得。 这是《李延年歌》,描写的是一位...
    子夜金风阅读 8,185评论 6 22

友情链接更多精彩内容