文档章节

scss

那些薄凉的小时光91
 那些薄凉的小时光91
发布于 2017/09/04 17:02
字数 113
阅读 1
收藏 0

 选择器嵌套

header &表示header作为nav的父集

& header表示header作为nav的子集

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

属性嵌套

.box {
  font: {
   size: 12px;
   weight: bold;
  }  
}

伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

混合宏

定义一组错误信息样式

@mixin error($borderWidth:2px){
 border: $borderWidth solid #f00; color: #f00; 
}

调用error样式

.generic-error {
 @include error();/*直接调用error Mixins*/ 
}
 .login-error {
 @include error(3px);/*调用error Mixins,并将$borderWidth参数重定义为3px*/ 
}

 

© 著作权归作者所有

共有 人打赏支持
那些薄凉的小时光91
粉丝 3
博文 23
码字总数 4753
作品 0
昌平
brackets使用brackets-sass插件怎样才能编译的scss输出到指定目录

本地项目: --Sass ---+ css ---+ scss ------+demo1.scss ---+ demo.html ---+ .brackets.json .brackets.json文件内容: /* Resulting file tree will appear as follows: + bower_compone......

流风回雪pj
2016/09/14
369
0
十个有用的Sass Mixins

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用,可以帮助前端开发人员节省很多时间,而且能更...

sunshinewyf
2015/10/04
115
0
利用npm实现scss的自动编译

npm实现scss自动编译 利用npm中--watch开启自动监测,只要ctrl+s自动保存并将scss文件转译为css文件 以下说一下使用步骤: 1. 安装node和npm 2. 安装ruby SASS是Ruby语言写的,但是两者的语法...

说不通的执拗
2016/12/09
26
0
webpack4 系列教程(七): SCSS提取和懒加载

教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载。 个人技术小站: 有空就来看看, 我一直都在 本节课讲解在中的 SCSS 提取...

godbmw
09/01
0
0
scss转换成css,hotcss

1.将scss文件转换成css文件的步骤: Ubuntu系统: sudo apt-get install ruby sudo apt install ruby-sass sudo gem install sass 建立文件夹,新建index.html 和style.scss 1.cd 文件夹 2.......

wftt
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用Golang做了一个命令行贪吃蛇游戏

用Golang做了一个命令行贪吃蛇游戏 项目介绍 项目链接:https://gitee.com/lwow2025/snake-go 最近看了一本做几个小项目的书,突然就想用Golang做一个命令行贪吃蛇,也没啥特殊原因。 软件架...

Mediv
17分钟前
0
0
storm的利用并行度提高处理速度的经验

在storm的流计算框架中,在数据量非常大或者计算逻辑比较复杂的情况下,可能会造成处理速度变慢的情况,最后反而不满足了系统的处理要求,因此这里讨论一下。本文的内容是我在storm的使用过程...

飓风2000
26分钟前
0
0
课程推荐|深入浅出区块链博主:全栈区块链开发者的4堂必修课(线上优惠)

Tiny熊从2017年开始更新“深入浅出区块链”博客,在第一篇文章中,关于如何系统学习区块链技术,他这样描述:“从事区块链开发也有很多方向,如:区块链应用开发人员、区块链架构师、底层核心...

HiBlock
38分钟前
0
0
激活win10 亲测有效

1.首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的“Windows”按钮,从打开的扩展面板中依次点击“设置”-“更新和安全”,并切换到“激活”选项卡,在此就可以查看到...

可达鸭眉头一皱
40分钟前
0
0
SpringWind180926

SpringWind SpringWind项目代码学习笔记 /SpringWind/src/main/webapp/WEB-INF/views/login.html 第15行action="#springUrl('/account/login.html')"【为什么是#springUrl】 第4行<a class=......

颖伙虫
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部