在项目里使用 sass

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们先简单的试一下 sass ... 打开项目 .. app .. styles ... 重命名一下这里的 main.css .. 文件的扩展名设置成 scss

在这个文件里你可以用 scss 的形式去创建样式 .. 文件的内容会自动编译好,放到 .tmp 还有 dist 目录的下面 ..

sass 里的变量的名字是用 $ 开头的,定义一个变量,名字是 page-background .. 它的值是一个颜色 ..

下面再添加一个样式 ... 一个 body 元素选择器 ... 设置一下 background 属性,表示背景 .. 它的值用一下上面定义好的 $page-background 这个变量 ..

保存一下 ... 你会看到页面的背景颜色的变化 .. 打开 .tmp 下面的 styles .. main.css

这个文件就是把 sass 编译成普通的 css 的样子 ..

在 styles 目录的下面 ... 新建一个 sass 文件 ... 文件的名字可以使用下划线开头 .. 表示这个文件是一个 Partial,也可以把它想成是个模块 .. _base.scss

这种带下划线开头的 sass 文件不会被编译成单独的 css 文件,你可以在其它的 sass 文件里导入它 ..

我们把在 main.scss 里面添加的东西放到这个新的文件里 .. 随便再改一下这个颜色的值 ..

然后在 main.scss 文件里,用一下 @import 去导入 base ...

保存 ... 效果是一样的 ..

项目里用的一些变量可以单独放到一个 Partial 里 .. 新建一个 scss 文件,名字是 _variables.scss

把在 _base 里面定义的变量放到这个 _variables.scss 文件里 ... 改一下颜色的值 .. #f8f8f8

然后在 main.scss 里面,再导入这个变量文件 ... 保存 ... 你可以把项目需要的样式分成不同的部分,把它们单独放在各自的文件里 .. 然后在这个 main.scss 里面,可以导入这些 sass 文件。

在项目里使用 sass《 网页设计案例:导航设计 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点