<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>bingxiaoxiao</title>

    <link rel="stylesheet" href="../css/demo.css">

</head>

<body>

    <!-- 使用变量 -->

    <div class="selected">使用变量</div>

    <!-- 嵌套CSS 规则 -->

    <div id="content">

        <article class="article ">

            <h1>我就是标题</h1>

            <p class="">bingxiaoxiao , hello word</p>

        </article>

        <aside class="footer">

            版权 -

        </aside>

    </div>

    <!-- 子组合选择器和同层组合选择器：>、+和~;

    article section { margin: 5px }

    article > section { border: 1px solid #ccc }

    你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。

    第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

    可以用同层相邻组合选择器+选择header元素后紧跟的p元素：header + p { font-size: .1em }

    你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：article ~ article { border-top: 1px dashed #ccc } -->

    <!-- css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

    sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，

    它们以//开头，注释内容直到行末。

    body {

      color: #; // 这种注释内容不会出现在生成的css文件中

      padding: ; /* 这种注释内容会出现在生成的css文件中 */

    } -->

    <!-- 混合器 -->

    <div class="notice">我是混合器</div>

    <ul class="plain"><li>当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则</li></ul> 

    <!-- 继承 -->

    <div class="seriousError">我要继承</div>

</body>

</html>


demo.sass


// 1.使用变量

// sass使用$符号来标识变量

// sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然

$highlight-color: #F90;

$highlight-border: 1px solid $highlight-color;

.selected {

  border: $highlight-border;

}

// 2.嵌套CSS 规则

$nav-color: #F90;

$color-theme:red;

#content {

  article {

    h1 { color: $nav-color }

    p { font-size:18px;background: $nav-color}

    // 父选择器的标识符&;

    &:hover { color: $color-theme }

  }

  aside { background-color: gold ;color: $color-theme;text-decoration:underline }

}

// 4. 静默注释;

// body {

//   color: #333; // 这种注释内容不会出现在生成的css文件中

//   padding: 0; /* 这种注释内容会出现在生成的css文件中 */

// }

// 5.混合器  混合器使用@mixin标识符定义   样式表中通过@include来使用这个混合器，放在你希望的任何地方。

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

.notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

@mixin no-bullets {

  list-style: none;

  li {

    list-style-image: none;

    list-style-type: none;

    margin-left: 0px;

  }

}

ul.plain {

  color: red;

  @include no-bullets;

}

//6.通过选择器继承继承样式  @extend 继承

.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}


												


											
SASS 简单实用的更多相关文章
	

    
								
  1. jQuery的几种简单实用效果
		
    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
    
		
    2. 
						
  2. 经验分享：10个简单实用的 jQuery 代码片段
		
    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
    
		
    3. 
						
  3. 简单实用的PHP防注入类实例
		
    这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下   本文实例讲述了简单实用的PHP防注 ...
    
		
    4. 
						
  4. php简单实用的操作文件工具类（创建、移动、复制、删除)
		
    php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) {  // 原目录,复制到的目录 $dir = opend ...
    
		
    5. 
						
  5. 基于Bootstrap简单实用的tags标签插件
		
    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
    
		
    6. 
						
  6. C#_简单实用的翻页
		
    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
    
		
    7. 
						
  7. 简单实用的Windows命令（一）
		
    前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...
    
		
    8. 
						
  8. 简单实用的Windows命令（二）
		
    昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
    
		
    9. 
						
  9. iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信
		
    一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. FakeGame 集成总结
			
    1.64位支持(目前编译不过); 2.Dx9? 2.以何种方式提供(源码?工程版本(VS2005还是其他)): 3.是否可以连接TC的服务器进行调试? TDR编解码失败: 不同目录下存在a.lib的不 ...
    
			
    2. 
						
  2. linux c生成唯一文件名称
			
    linux c生成唯一文件名称可用mktemp()或mkstemp()函数
    
			
    3. 
						
  3. 6.1-uC/OS-III软件定时器
			
    1.软件定时器是 uC/OS 操作系统的一个内核对象,软件定时器是基于时钟节拍和系统管理创建的软件性定时器,理论上可以创建无限多个,但精准度肯定比硬件定时稍逊一筹. 2.软件定时器启动之后是由软件定时 ...
    
			
    4. 
						
  4. 2018-2019-1 20189203《Linux内核原理与分析》第五周作业
			
    第一部分 课本学习 用户态.内核态和中断 1.内核态:处于高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态,对所有的指令包括特权指令都可以执行. 2.用户态:处于低的 ...
    
			
    5. 
						
  5. jquery对复选框(checkbox)的操作（精华）
			
    @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...
    
			
    6. 
						
  6. vue和jQuery嵌套实现异步ajax通信
			
    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...
    
			
    7. 
						
  7. HttpRunner 接口自动化简单实践
			
    1.安装 1.1 命令行pip直接安装就好 1.2 验证安装 命令行输入hrun -V,返回项目版本信息则表明安装成功 2.新建测试项目 这里我用直接通过框架的脚手架工具命令生成目录结构 如:hrun ...
    
			
    8. 
						
  8. 禁止chrome浏览器的缓冲图片以及css等资源文件
			
    今天做了一个动画的效果,在ff下正常 但是到了谷歌下就不正常了,非常郁闷,看了下是缓存的问题 ,于是度娘了一下发现清理缓存的技巧还是满多的,这里借鉴一下别人的总结,人的大脑有限,下次忘记的时候还可以在 ...
    
			
    9. 
						
  9. Spring笔记 #01# 一个小而生动的IOC例子代码
			
    索引 Spring容器的最小可用依赖 用XML定义元数据 实例化容器&使用容器 例子中仅包含两种类:英雄类Hero和武器类Weapon. 演示DI:给Hero初始化Weapon 演示AOP:法 ...
    
			
    10. 
						
  10. python爬虫——论抓包的正确姿势和学好Javascript的重要性（1）
			
    没事想爬下数据,就入了scrapy坑,跟着https://zhuanlan.zhihu.com/data-factory这篇教程走,中间被小数量的网站坑过,不过还是写出了爬虫~~ 切糕王子:毫无防御, ...
    
			
    11.