登录免费注册



Sass入门

首页  思维导图  详情



Sass入门

2021-01-23 19:54:48   6  举报





AI智能生成

前端CSS框架 Sass入门使用一图掌握！

读书笔记

软件开发

移动开发

前端开发

模版推荐

作者其他创作

大纲/内容

优点

写出更优秀的CSS。<br>

解决CSS编写过程中的痛点问题，比如精灵图合图、属性的浏览器前缀处理等。

有效组织样式、图片、字体等项目元素。

受众

重构的同学，写很多CSS，不知如何自动化。

希望在项目周期内更好地组织项目内容。

使用

将`scss文件`转化为`css文件`

sass main.scss main.css

语法

后缀名

`.sass`

对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。

`.scss`

是css语法的超集，可以使用大括号和分号。

一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。

两种格式之间的转换

sass-convert main.scss main.sass

变量

通过`$`符号来声明变量

给文件名的前面加了下划线，意思是声明为局部文件

既定规则

没有文件后缀名时，Sass 会自动添加 .scss 或者 .sass 的后缀（具体要看已经存在哪个后缀的文件）

同一目录下，局部文件和非局部文件不能重名。

注释

单行注释

//我是单行注释

块级注释

/*<br> 我是块级注释<br> 哈哈<br>*/<br>

单行注释不会出现在自动生成的css文件中。

定义

Syntactically Awesome Stylesheets Sass<br>

Hampton Catlin开发

简化 CSS 工作流程的方式，更容易维护和开发 CSS 内容

世界上最成熟、稳定和强大的专业级 CSS 扩展语言。

s专注的是怎样创建优雅的样式表，而不是内容

Sass、Compass与CSS<br>

Less/Sass是语法<br>

Compass是框架

CSS是目标

安装

安装Ruby（windows环境）<br>

安装时，记得勾选“环境变量”

在命令行中输入`ruby -v`，查看ruby的的版本

安装Sass

切换清华大学镜像

查看当前镜像源<br>

gem sources -l<br>

安装Sass

gem install sass

查看sass版本<br>

sass -v<br>

升级sass版本

gem update sass

运行帮助命令行

sass -h

`gem install sass`安装Sass

Compass

是什么

开源的CSS书写框架。

使用

安装

gem isntall compass<br>

查看版本

compass -v

创建工程目录

cd workspace

compass create CompassDemo

通过 copass watch 监听sass文件的变化

cd CompassDemo

compass watch<br>

 Collect

Get Started

Python基础知识入门整理

Vue学习笔记——从入门到实战

 Collect

Get Started

Vue学习笔记——从入门到实战

 Collect

Get Started

前端进击

 Collect

Get Started

css 预处理之sass













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document