发表于: 2019-03-23 23:32:56
2 811
今天完成的事情:
1.下载并配置好了SASS。
2.学习SASS。
明天计划的事情:
1.继续学习SASS。
2.用SASS完成任务十一。
遇到的问题:
1.SASS配置难的一批,我的电脑他有自己的想法。下午用了三四个小时,动员了八成web学员后,终于在我的电脑上可以使用SASS了。
问题是SASS插件在watching中,但是无法同步css代码。最后一波瞎操作也不知道是怎么解决了
收获:
1.SASS是一款强化css的辅助工具。在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,有助于更好地组织管理样式文件,以及更高效地开发项目。sass有两种语法格式。一种是SCSS,支持CSS hacks写法,和我之前使用的css写法是一样的,所以我也选择使用这种写法,以.scss为后缀名。一种是SASS,是一种简化格式。使用缩进代替花括号,使用换行代替分号,以.sass为后缀名。
2.嵌套规则。目前看下来感觉最实用的功能。内层的样式会将它外层的选择器作为父选择器。而如果想直接使用嵌套外层的父选择器,可用符号&代表嵌套规则外层的父选择器。比如设置父元素的伪元素:
编译后为:
不仅可以标签嵌套,也可以属性嵌套。比如font全家桶有font-size;font-family;font-weight;直接增加了代码可读性和易写性。
3./* */ 注释会被编译进css中。//不会被编译进去。如果想增加代码的可读性,但是不想在网页显示中被看到自己的注释,可以使用//注释。//注释是单行注释。
4.$变量,以美元符号开头。赋值方法与属性写法一样。直接使用可以调用变量。
例如$width:5px; body{width:$width}就赋值body宽度为5px了。如果这个数值在一个部分被大量的调用,就可以给这个变量赋值,利于以后代码的维护,更改变量值就可以统一修改所以调用这个变量的属性。
5.article section { margin: 5px }这种写法会命中article里所有的section标签;
article > section { border: 1px solid #ccc }这种写法只命中article里的直接子元素为section的标签。(紧跟)
6.混合器。如果一个网站中需要大段的重用代码,可以通过SASS的混合器实现大段代码的重用。
混合器使用@mixin (迷信)定义。然后通过@include引用。混合器用起来感觉和类有些相似。类名是在html中应用的,而混合器是在样式表中用的。
7.选择器继承。extend。一个选择器可以继承另一个选择器的所有样式。要注意的是不仅会继承原本选择器的所有样式,与原本选择器有关的组合选择器样式也会被继承。例如 header a:hover{xxxx}; body继承了header的样式后,body a:hover也有同样的效果。
8.SASS比LESS强的地方在于可以定义函数。
if语句:@if的表达式返回值不是false的时候,则条件成立输出{}里的代码。
后面可以跟多个 else代码,SASS会逐条执行,如果全部失败,则执行最后else代码。
for: @for可以在限制的范围内重复输出格式。@for $var from <start> through <end>和@for $var from <start> to <end>。当使用 through
时,条件范围包含 <start>
与 <end>
的值,而使用 to
时条件范围只包含 <start>
的值不包含 <end>
的值。
start和end必须是整数值。
each:@each的格式是$var in <list> $var是变量名。 list的列表。
each会遍历列表中每一个var的项目输出结果。
while:指令重复输出格式直到不满足表达式。就像他的意思 在...期间。
评论