sass学习入门篇(三)

这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多

一,选择器嵌套:指的是在一个选择器中嵌套另一个选择器来实现继承。使用&表示父元素选择器

li{
float :left;
   a{
         color:#fff;
         &:hover{
           color:#ddd;
     }
    }
 }

  跟css用法一样,没什么说的。

二,属性嵌套,指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头

.fshadow{
  boder:{
  style:solid;
  left:{width:4px;color:#333;}
}
}

  这种用法倒是没见过,可以试试。

三,@at-root是sass3.3.0版本的新增功能,用来跳出选择嵌套的

//没有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}

//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

  解析的css:

//没有跳出
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}

//单个跳出
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

//多个跳出
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;

  

时间: 2024-10-12 12:42:21

sass学习入门篇(三)的相关文章

【SSRS】入门篇(三) -- 为报表定义数据集

原文:[SSRS]入门篇(三) -- 为报表定义数据集 通过前两篇文件 [SSRS]入门篇(一) -- 创建SSRS项目 和 [SSRS]入门篇(二) -- 建立数据源 后, 我们建立了一个SSRS项目,并取得数据源,那么接下来做的就是知道报表要显示什么数据了,这一步可以通过建立数据集来实现. 1.解决方案资源管理器 ->右键选择共享数据集 ->添加新数据集: 2.在共享数据集属性窗口输入数据集名称:AdventureWorksDataset:数据源选择之前建立的:AdventureWorks

8.17_Linux之bash shell脚本编程入门篇(三)之循环以及函数function的使用

bash shell脚本编程入门篇(三)之循环 什么是循环执行? 将某代码段重复运行多次 重复运行多少次: 循环次数事先已知 循环次数事先未知 有进入条件和退出条件 相关命令:for, while, until,selet, for命令的使用 作用: 依次将列表中的元素赋值给"变量名"; 每次赋值后即执行一次循环体; 直到列表中的元素耗尽,循环结束 命令格式: for 变量名 in 列表; do 循环体(正常执行的执行命令) 语句1 语句2 语句3 ... done 列表生成方式: (

JDK源码学习--String篇(三) 存储篇

在进一步解读String类时,先了解下内存分配和数据存储的. 数据存储 1.寄存器:最快的存储区,位于处理器的内部.由于寄存器的数量有限,所以寄存器是按需分配. 2.堆栈:位于RAM中,但是通过堆栈指针可以从处理器哪里获得直接支持.堆栈指针向下移动,则分配新的内存:堆栈指针向上移动释放内存. 注:堆栈中存储基本的数据类型和[对象引用],但是Java对象存储在堆中. 3.堆:通用内存池,位于RAM中,用于存放所有的Java对象. 注:堆中存储的 new创建的对象和数组. 4.常量存储:存放常量.

Sass学习笔记(三)

一.Sass的控制命令 二.Sass的函数功能 sass中除了可以定义变量,还自备了一系列函数功能,主要包括:字符串函数.数字函数.列表函数.颜色函数.Instrospection函数.三元函数等.当然,sass中也有自定义函数. 其中,最常使用的有:字符串函数.数字函数.列表函数.颜色函数. Map:Sass的map常常被称为数据地图,也有人称为数组,总是以 key:value 成对的出现,但其更像是一个 JSON 数据. 颜色函数:在Sass的官方文档中,Sass的颜色函数从大方面主要分为

Phonegap学习入门篇

安装Node.js 安装Git 设置代理 公司内网使用时可能需要设置代理 ·设置CMD代理 set http_proxy=http://127.0.0.1:8080 set https_proxy=http://127.0.0.1:8080 ·设置npm代理 npm config set registry http://registry.npmjs.org npm config set proxy="http://127.0.0.1:8080" npm config set https

python爬虫scrapy命令工具学习之篇三

命令行工具(Command line tools) 全局命令 startproject settings runspider shell fetch view version 项目命令 crawl check list edit parse genspider deploy bench 1.创建爬虫工程的命令 scrapy startproject myproject 2.控制项目创建一个spider scrapy genspider mydomain mydomain.com 3.使用爬虫进行

css学习入门篇(1)

1.网页制作 的两大误区:[1].网页用了Table,页面就不标准[2].div标签越多越好. 解释:table是为了存储数据而div是为了架设页面 ,两者有不同的工作职能 . 2.W3C标准:他不是一个标准,而是一系列标准的组合:结构标准(代表语言HTML).表现标准(CSS).动作标准(JavaScript). 3.css控制页面的四种方式: [1]行内样式:<p style=" color: #F00; background: #CCC; font-size: 12px;"

lintcode入门篇三

一. 两数之和 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是 0 到 n-1. 样例 Example1: 给出 numbers = [2, 7, 11, 15], target = 9, 返回 [0, 1]. Example2: 给出 numbers = [15, 2, 7, 11], target = 9, 返回 [1, 2]. 挑战 Either of the

【SSRS】入门篇(四) -- 向报表添加数据

原文:[SSRS]入门篇(四) -- 向报表添加数据 定义好数据集后 [SSRS]入门篇(三) -- 为报表定义数据集 ,就可以开始设计报表了,将要显示在报表的字段.文本框.图像和其他项从工具箱拖放到报表设计图画上,如下图: 1.打开在[SSRS]入门篇(一) -- 创建SSRS项目 建立的报表Sales Orders.rdl: 2.从工具箱把"表"拖放到"设计图画": 注:如果左边没有显示工具箱的话,可以通过"菜单 -> 视图 -> 工具箱&