<!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. [daily] 比端口转发更高级的ssh device tunnel转发
			
    没有什么能够阻挡,你对自由的向往. 场景: 我有一台设备Server100,在某一个f复杂的内网里,需要多次ssh跳转可以访问到.但是它不能直接访问internet. 我现在需要在我的ssh路径上,搭 ...
    
			
    2. 
						
  2. PrimeNG之TreeTable
			
    --treetable用于显示分层数据表格的格式 Import import {TreeTableModule,TreeNode,SharedModule} from 'primeng/primeng ...
    
			
    3. 
						
  3. python_打包成exe
			
    1. 安装pyinstaller pip install pyinstaller 或通过国内镜像下载(较快): pip install pyinstaller -i http://pypi.douba ...
    
			
    4. 
						
  4. 3、jeecg 笔记之 模糊查询
			
    1.前言 jeecg 考虑到默认模糊查询的话,会增加系统压力,导致查询慢,本来系统就挺那啥的... 2.方式一之实体赋值 实体重新赋值查询,用 * %% * 实现,我们知道 sql 中通常使用 % 去 ...
    
			
    5. 
						
  5. SQLAlchemy（包含有Flask-Migrate知识点）
			
    what's the SQLAlchemy SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQ ...
    
			
    6. 
						
  6. Micro和Macro性能学习【转载】
			
    转自:https://datascience.stackexchange.com/questions/15989/micro-average-vs-macro-average-performance- ...
    
			
    7. 
						
  7. OfficeOpenXml：World、Excel导出导入库
			
    基础库:EPPlus 根据模版:OfficeOpenXml.Entends
    
			
    8. 
						
  8. 生成并下载txt类型的文件
			
    public ActionResult Index() { return View(); } /// <summary> /// 获取网页源码,并将其写入txt文件中,下载到本地 ///  ...
    
			
    9. 
						
  9. for loop
			
    https://www.cnblogs.com/EasonJim/p/8315939.html
    
			
    10. 
						
  10. Linux基础命令---lpstat查看打印任务
			
    lpstat lpstat指令用来显示当前任务.打印机的状态.如果没有参数,那么就显示打印队列. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE. ...
    
			
    11.