sass学习总结的几点

plus2047 发布于2019-08-29 11:33 / 1586人阅读

摘要：详细的学习网址中文网的几大特性变量嵌套混合器继承了解了保持条理性和可读性的最基本的三个方法嵌套导入和注释。为了解决这种以及其他情况，提供了一个特殊结构这意味着这条规则将会被应用到选择器，元素内链接的所有子元素在被时都会变成红色。

详细的学习网址：http://www.sasschina.com/guide/ saa中文网

Sass的几大特性：

变量嵌套混合器@minxin 继承@extend

了解了保持sass条理性和可读性的最基本的三个方法：

嵌套、导入和注释。

1.sass变量声明作用域

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此

2.:hover

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结构&

article a {
  color: blue;
  :hover { color: red }
}

这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

article a {
  color: blue;
  &:hover { color: red }
}

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：

article a { color: blue }
article a:hover { color: red }

3.！default

假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

4.关于继承

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

如上所示，在class="seriousError"的html元素内的超链接也会变成红色和粗体。

服务器托管私有云 cdn回源的几点问题机器学习学习总结机器学习总结 javascript学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111722.html

学习canvas 过程中的几点总结

摘要：默认尺寸为或者如果两个尺寸不一致，那么画出来的图形，和想象中的图形是有差距的。 1.canvas的画布大小与canvas元素大小 canvas尺寸分为两种，一种是canvas元素本身的尺寸，另一种是canvas画布的尺寸 canvas本身尺寸可以通过style样式来设置 .canvas{ width:100px; height:100px; } /* 设置了元素在浏...

notebin 2019-08-29 12:14 评论0 收藏0
学习canvas 过程中的几点总结

摘要：默认尺寸为或者如果两个尺寸不一致，那么画出来的图形，和想象中的图形是有差距的。 1.canvas的画布大小与canvas元素大小 canvas尺寸分为两种，一种是canvas元素本身的尺寸，另一种是canvas画布的尺寸 canvas本身尺寸可以通过style样式来设置 .canvas{ width:100px; height:100px; } /* 设置了元素在浏...

xuexiangjys 2019-08-05 10:56 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

Cobub 2019-08-02 16:13 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

shiyang6017 2019-08-23 16:59 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

Jackwoo 2019-08-05 16:44 评论0 收藏0