1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>bingxiaoxiao</title>
  9.     <link rel="stylesheet" href="../css/demo.css">
  10. </head>
  11.  
  12. <body>
  13.     <!-- 使用变量 -->
  14.     <div class="selected">使用变量</div>
  15.     <!-- 嵌套CSS 规则 -->
  16.     <div id="content">
  17.         <article class="article ">
  18.             <h1>我就是标题</h1>
  19.             <p class="">bingxiaoxiao , hello word</p>
  20.         </article>
  21.         <aside class="footer">
  22.             版权 -
  23.         </aside>
  24.     </div>
  25.     <!-- 子组合选择器和同层组合选择器：>、+和~;
  26.     article section { margin: 5px }
  27.     article > section { border: 1px solid #ccc }
  28.     你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。
  29.     第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
  30.     可以用同层相邻组合选择器+选择header元素后紧跟的p元素：header + p { font-size: .1em }
  31.     你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：article ~ article { border-top: 1px dashed #ccc } -->
  32.  
  33.     <!-- css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
  34.  
  35.     sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，
  36.     它们以//开头，注释内容直到行末。
  37.     body {
  38.       color: #; // 这种注释内容不会出现在生成的css文件中
  39.       padding: ; /* 这种注释内容会出现在生成的css文件中 */
  40.     } -->
  41.  
  42.     <!-- 混合器 -->
  43.     <div class="notice">我是混合器</div>
  44.     <ul class="plain"><li>当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则</li></ul> 
  45.  
  46.     <!-- 继承 -->
  47.     <div class="seriousError">我要继承</div>
  48.  
  49. </body>
  50.  
  51. </html>
  1.  
  1. demo.sass
  1. // 1.使用变量
  2. // sass使用$符号来标识变量
  3. // sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然
  4. $highlight-color: #F90;
  5. $highlight-border: 1px solid $highlight-color;
  6. .selected {
  7.   border: $highlight-border;
  8. }
  9. // 2.嵌套CSS 规则
  10. $nav-color: #F90;
  11. $color-theme:red;
  12. #content {
  13.   article {
  14.     h1 { color: $nav-color }
  15.     p { font-size:18px;background: $nav-color}
  16.     // 父选择器的标识符&;
  17.     &:hover { color: $color-theme }
  18.   }
  19.   aside { background-color: gold ;color: $color-theme;text-decoration:underline }
  20. }
  21.  
  22. // 4. 静默注释;
  23. // body {
  24. //   color: #333; // 这种注释内容不会出现在生成的css文件中
  25. //   padding: 0; /* 这种注释内容会出现在生成的css文件中 */
  26. // }
  27.  
  28. // 5.混合器  混合器使用@mixin标识符定义   样式表中通过@include来使用这个混合器，放在你希望的任何地方。
  29. @mixin rounded-corners {
  30.   -moz-border-radius: 5px;
  31.   -webkit-border-radius: 5px;
  32.   border-radius: 5px;
  33. }
  34. .notice {
  35.   background-color: green;
  36.   border: 2px solid #00aa00;
  37.   @include rounded-corners;
  38. }
  39.  
  40. @mixin no-bullets {
  41.   list-style: none;
  42.   li {
  43.     list-style-image: none;
  44.     list-style-type: none;
  45.     margin-left: 0px;
  46.   }
  47. }
  48. ul.plain {
  49.   color: red;
  50.   @include no-bullets;
  51. }
  52.  
  53. //6.通过选择器继承继承样式  @extend 继承
  54. .error {
  55.   border: 1px solid red;
  56.   background-color: #fdd;
  57. }
  58. .seriousError {
  59.   @extend .error;
  60.   border-width: 3px;
  61. }

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

  1. jQuery的几种简单实用效果

    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...

  2. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  3. 简单实用的PHP防注入类实例

    这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下   本文实例讲述了简单实用的PHP防注 ...

  4. php简单实用的操作文件工具类（创建、移动、复制、删除)

    php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) {  // 原目录,复制到的目录 $dir = opend ...

  5. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  6. C#_简单实用的翻页

    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...

  7. 简单实用的Windows命令（一）

    前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...

  8. 简单实用的Windows命令（二）

    昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...

  9. iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信

    一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...

随机推荐

  1. Jenkins在windows服务器上依赖的maven仓库目录

    1.在windows server 2008上,maven仓库路径为: C:\Users\用户名\.m2 2.在windows server 2003上(加入域的服务器),maven仓库路径为: C: ...

  2. [面试题]vi/vim快捷键及面试题系列

    选择 vi保存退出命令 w! wq! q! www vi移动光标到文件最后一行 G g ggg 4444 vi删除一行的命令 dd d D shift+4 在vi编辑器中的命令模式下,键入()可在光标 ...

  3. 大牛推荐的30本经典编程书籍，从Python到前端全系列。

    注:为了方便阅读与收藏,我们也制作了30本书籍完整清单的Markdown.PDF版以及思维导图版,大家可以在实验楼公众号后台回复关键字"书籍推荐"获取. Python 系列(10本 ...

  4. ThinkPHP数据库操作相关

  5. laravel自定义验证

    1.在控制器中直接写验证$this->validate($request, [ 'video_ids' => [ function($attribute, $value, $fail) { ...

  6. linux 创建用户和添加到组

    1.添加用户 先用root用户登录 useradd -m testuser #这样的做会在/home下创建目录 2.指定shell #cat /etc/passwd  #查看用户指定shell roo ...

  7. mecacheq的配置

    在处理业务逻辑时有可能遇到高并发问题,例如商城秒杀.微博评论等.如果不做任何措施可能在高瞬间造成服务器瘫痪,如何解决这个问题呢?队列是个不错的选择.队列(Queue)又称先进先出(First In F ...

  8. 一文理解 Java NIO 核心组件

    同步.异步.阻塞.非阻塞 首先,这几个概念非常容易搞混淆,但NIO中又有涉及,所以总结一下[1]. 同步:API调用返回时调用者就知道操作的结果如何了(实际读取/写入了多少字节). 异步:相对于同步, ...

  9. H5开发：横屏适配

    平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少.对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配. 对于 H5 横屏页面来 ...

  10. SpringMVC登录拦截DEMO

    交给/login的post请求的控制器处理, 并通过控制器的逻辑控制获取提示信息login.jsp<%-- Created by IntelliJ IDEA. User: shijinglu D ...