那些不明不白的$符号设计--Sass和Emmet,变量设计原理相通
以前看到php变量的定义,直接使用$符号开始,怎么看都不习惯。后来呀,在使用Emmet的过程中,又接触到了$符号。今天,在学习Sass的过程种,再一次接触到$符号,兴致所致,不由得想写一篇,对比一下搞不懂的$符号设计。
1. Emmet
div.item-$*5{haha}
,,,,
2. Sass
生成item-1, item-2, item-3, item-4, item-5 这5个类,$i,即$1, $2, $3, $4, $5 分别代表一个变量名,插入选择器中
输入sass命令: sass input.scss output.css --style expanded, 编译后,生成的output.css css类如下:
在index.html中引入output.css:
运行效果如下:
3.总结
$1, $2, $3, $4, $5代表变量,Emmet相当于直接执行了一个循环语句,Sass也是通过脚步的方式,编译后,执行了一个循环语句,原理是相通的。
那些不明不白的$符号设计--Sass和Emmet,变量设计原理相通的更多相关文章
- sass揭秘之变量(转载)
出处:http://www.w3cplus.com/preprocessor/sass-basic-variable.html 因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sas ...
- 进阶篇:4.3)DFA设计指南:防错设计( 防呆设计)
本章目的:每一个装配步骤都有设计防错. 1.前言 关于防错设计,作者有想说的话: 1)防错设计是DFA重要的一条.因为太过重要,作者单独开一分章写! 2)只有理解了设计防错的重要,才会去设计防错特征. ...
- 移动端UI界面设计:APP字体排版设计的七个原则
移动端UI界面设计:APP字体排版设计的七个原则 发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...
- 【转】App架构设计经验谈:接口的设计
App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 安全机制的设计 现在,大部分App的接口都采用REST ...
- GPS部标平台的架构设计(九)-GPS监控客户端设计
交通部的部标过检,所有的测试都是从客户端发起的,也是在客户端体现的,在客户端承载了部标标准所要求的所有的功能,是整个部标平台当中工作量最大的部分,也是最繁琐的部分. 客户端设计面临两个问题: 1.基于 ...
- Sass细节一变量
同步发布在个人站 变量 局部变量和全局变量的定义 Sass的变量是用$申明的,有局部变量(选择器内部的变量)和全局变量(不在任何选择器内的变量).例如: //这里$width就是全局变量 $width ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- 【转】perl特殊符号及默认的内部变量
perl特殊符号及默认的内部变量,有需要的朋友不妨参考下 Perl的特殊符号 @ 数组 $x{} x名字前面是美元符号($),后面是花 ...
- 游戏UI框架设计(二) : 最简版本设计
游戏UI框架设计(二) --最简版本设计 为降低难度决定先讲解一个最简版本,阐述UI框架的核心设计理念.这里先定义三个核心功能: 1:UI窗体的自动加载功能. 2:缓存UI窗体. 3:窗体生命周期(状 ...
随机推荐
- ipV4&V6的区别
1. 更大的地址空间.IPv4中规定IP地址长度为32,即有2^32-1个地址:而IPv6中IP地址的长度为128,即有2^128-1个地址. 2. 更小的路由表.IPv6的地址分配一开始就遵循聚类( ...
- 利用SignalR来同步更新Winfrom小试
之前写了个用Socket来更新多个Winfrom的试例,这两天看了下SignalR,也用这个来试一下 SignalR 地址:https://www.asp.net/signalr 我这个也是基于 ht ...
- 使用crontab调度任务
复杂的.分布式的.工作流式的调度可以通过azkaban来进行调度,除了执行调度任务之外,它还能进行定时调度.而对于简单的服务器任务,如执行一个小脚本,发送邮件等,可以使用crontab命令直接进行,在 ...
- 《Programming iOS 7》读书笔记 - 窗体大小与状态栏
1.从iOS7开始,状态栏开始变为透明的,根识图占领了整个窗体,包括状态栏后面的20像素高的区域,这种样式无法被改变.iOS6的状态栏是不透明的,窗体的尺寸通常会比屏幕的尺寸要小,可以设置窗体的尺寸为 ...
- fzu 2139 久违的月赛之二
Problem 2139 久违的月赛之二 Accept: 42 Submit: 106Time Limit: 1000 mSec Memory Limit : 32768 KB Probl ...
- 二进制GCD算法 减少%的时间消耗
/* 二进制求最大公约数.由于传统的GCD,使用了%,在计算机运行过程中要花费大量的时间,所以,采取二进制的求法,来减少时间的消耗. 算法: 当a,b都是偶数时: gcd(a,b)=2*gcd(a/2 ...
- Notepad++怎么使用正则替换
前言:工作中在oracle中写触发器的sql时,表字段有几十个,修改起来非常不方便,于是采用了Notepad++的替换 案例: 想把 v_update_time,v_create_time,v_rcv ...
- K:Treap(堆树)
Treap=Tree+Heap.Treap是一棵二叉排序树,它的左子树和右子树分别是一个Treap,和一般的二叉排序树不同的是, Treap记录一个额外的数据, 就是优先级.Treap在以关键码构 ...
- CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是bac ...
- IDEA下的第一个springBoot
1.第一步打开File->New->Project,SDK根据自己的需要选择,我这边选的是java7 2.Next之后 设置group 和artifact,根据自己的需要进行修改. 3.导 ...