首页 > 其他分享 >简单总结一下第二天学习Sass的知识点

简单总结一下第二天学习Sass的知识点

时间:2022-10-13 17:58:17浏览次数:63  
标签:总结 知识点 Sass title color 元素 选择器 css

Sass的目的之一就是为了少写css代码,便于阅读。

为降低Sass编译后的css代码量,使用组合选择器更能提高网站的速度:

先复习一下css选择器 

// 后代选择器
article section { margin: 5px } //祖先元素 后代元素 {}

// 子元素选择器
article > section { border: 1px solid #ccc } //父元素 子元素 {}

// 兄弟元素选择器 + ~
header + p { font-size: 1.1em } //选中元素 紧跟在选中元素的第一个p元素,如果header后面的第一个元素不是p标签,则该选择器不生效
div ~ p { color: #333 } //前一个~后面所有 选中后面所有指定兄弟元素

//分组选择器(并集选择器)
.p1,#p2,.p3...{} // 选择器1,选择器2,选择器n{} 选中多个选择器对应的元素

//复合选择器(交集选择器)注意选择器之间不能有空格,要紧挨着
span.s3 { font-size: 20px } //选中span标签class叫s3的元素

//伪类选择器 伪类表示元素的一种特殊状态
:hover   移入时元素的状态
:visited  已被访问过后的元素的状态
:active   被点击时元素的状态

//通配选择器 用来选中页面中所有的元素
*{ color:red }

//属性选择器 根据元素中的属性或属性值来选取指定元素
p[title*="bc"] { backgroud-color: yellow } //把所有title属性值中包含bc的p标签并设置成黄色背景
p[title="abc"] { color: red } //把所有title属性值为abc的p标签并设置成红色
p[title^="abc"] { color: red } //把所有title属性值以abc开头的p标签并设置成红色p[title$="abc"] { color: red } //把所有title属性值以abc结尾的p标签并设置成红色

 

  这些选择器可以毫不费力的用到Sass的规则嵌套中

#div {
  ~div{ font-size: 12px }; //选中#div后面所有的div标签
  >p { backgroud: #eee }; //选中#div下所有的p标签
  dl > {
    dt { color: #333 };
    dd { color: #fff };
  };
  nav + & { margin: 10px }
} 

 

 1.嵌套属性

div{
  border-style:solid;
  border-width:1px;
  border-color:#222;          
}
//改成:
div{
  border:{
    style:solid;
    width:1px;
    color:#222;     
  }  
}

  

2.导入Sass

css有一个不常用的@import规则,允许一个css文件导入其他css文件,后果就是只有执行到@import时,浏览器才会下载其他css文件,导致页面加载起来特别慢。

Sass也有一个@import规则,与css不同的是Sass的@import规则在生成css的时候就把相关文件导入进来了,这意味着所有的相关样式被归纳到了同一个css文件中,而无需发起额外的下载请求。被导入文件的变量和混合器都可以再导入文件中使用。

Sass文件散布在项目中,但有些Sass项目的作用只用于导入,Sass特意为这种情况约定了命名规则,即下划线开头,表示该文件只用于被引用,不需要生成对应的独立css文件。被引用时可以省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import “themes/night-sky”,局部文件可以有多个不同文件引用。

 

标签:总结,知识点,Sass,title,color,元素,选择器,css
From: https://www.cnblogs.com/jinGang66/p/16787573.html

相关文章

  • 10月13日内容总结——算法之二分法、三元表达式和各种生成式及匿名函数、部分常见内置
    目录一、算法简介之二分法(需要写的出来)简介什么是算法二分法二、三元表达式什么是三元表本质?三元表达式语法结构三、各种生成式列表生成式字典生成式集合生成式元组生成器(......
  • 基础知识点链接 su命令
    su与su-的区别:  ​​https://baijiahao.baidu.com/s?id=1597641627421414107&wfr=spider&for=pc​​  su-username-ccommand执行以下命令再退回之前用户举例如......
  • chap 3多分支结构 学习总结 第九组
    1.分支结构的定义1.1什么是分支结构?①.对于要先做判断再选择的问题就要使用分支结构。②.分支结构的执行是依据一定的条件选择执行路径,而不是严格按照语句......
  • python 异常总结:raise except
    raise语句是用来主动抛出一个指定的异常。raise语法格式:raise[Exception[,args[,traceback]]]raise主动抛出异常种类总结:except有匹配的error类型except......
  • 工作总结 #4
    在Avue-crud中搜索方法@search-change中将params传给query后,如下//搜索框搜索searchChange(params,done){this.query=params;this.page.currentPage=......
  • jQuery事件总结
    jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。click事件触发需要以下几点:click事件其实是由mousedown与mouseup......
  • 【JS】11-前端HTML5几种存储方式的总结
    接下来要好好总结一些知识,秋招来啦。。。虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~总体情况h5之前,存储主要是用​​cookies​​​。​​cookies​​......
  • 【博学谷学习记录】超强总结,用心分享 | MySQL锁简单介绍
    目录全局锁表级锁表级锁-表锁表级锁-元数据锁表级锁-IS(意向共享锁)与IX(意向排他锁)行级锁间隙锁例子临键锁和记录锁例子全局锁概念:全局锁就是对整个数据库实例加......
  • python in--总结
    “in”的存在使得python在操作可迭代对象时简单得多,这便是“in”存在的一个最大的好处1.用于判断(查找)元素是否在可迭代对象中(不包括生成器;但包括set集合,set不能迭代,但是也......
  • Element UI tree组件总结
    tree组件折叠//关闭弹窗时,折叠组织树(耗时操作)for(vari=0;i<this.$refs.tree.store._getAllNodes().length;i++){this.$refs.tree.store._getAllNodes()[i......