SASS 简单实用
<!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 简单实用的更多相关文章
- jQuery的几种简单实用效果
许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 简单实用的PHP防注入类实例
这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下 本文实例讲述了简单实用的PHP防注 ...
- php简单实用的操作文件工具类(创建、移动、复制、删除)
php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) { // 原目录,复制到的目录 $dir = opend ...
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- C#_简单实用的翻页
简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
- 简单实用的Windows命令(一)
前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...
- 简单实用的Windows命令(二)
昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
- iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信
一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...
随机推荐
- asp.net NPOI导出xlsx格式文件,打开文件报“Excel 已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃”
NPOI导出xlsx格式文件,会出现如下情况: 点击“是”: 导出代码如下: /// <summary> /// 将datatable数据写入excel并下载 /// </summa ...
- Redis的数据结构之List
存储list: ArrayList使用数组方式 LinkedList使用双向链接方式 双向链接表中增加数据 双向链接表中删除数据 存储list常用命令 两端添加 两端弹出 扩展命令 lpush 方式添 ...
- 7.1-uC/OS-III中断管理
在 uC/OS 系统中,中断相当于一个优先级最高的任务.中断一般用于处理比较紧急的事件, 而且只做简单处理,例如标记该事件,带退出中断后再做详细处理.在使用 uC/OS系统时, 一般建议使用信号量. ...
- GreenDao开源ORM框架浅析
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011133213/article/details/37738943 Android程序开发中,避免 ...
- jenkins和svn搭建自动代码构建发布
jenkins安装和配置 .安装jenkins .yum install java wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins. ...
- [转]有return的情况下try catch finally的执行顺序
结论: 1.不管有没有出现异常,finally块中代码都会执行: 2.当try和catch中有return时,finally仍然会执行: 3.finally是在return后面的表达式运算后执行的(此 ...
- Python-python中数组和列表读取一列的方法
转载自:https://blog.csdn.net/songyunli1111/article/details/78109976 在python中,普通的列表list和numpy中的数组array是不 ...
- sql 小技巧
declare @pids varchar(max)='' ),pid)+','+@pids from product where pname like '%red%' select @pids
- Mysql 数据类型、约束类型
mysql数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准 ...
- MySQL教程 3.3
本实验是将数据加载到表中,具体步骤如下: 先创建数据库menagerie,再启用数据库,然后在库中创建表pet. 运行如下代码,将文本文件pet.txt加载到pet表中,但出现ERROR 1148.查 ...