CSS框架sass的简单一览

sass结尾的文件有着更严格的格式要求,scss文件更贴近原生css

比如sass文件

CSS Code复制内容到剪贴板

#main

color: #fff

&-sidebar

border: 1px solid

等同于scss的

CSS Code复制内容到剪贴板

#main {

color: black;

&-sidebar { border: 1px solid; }

}

编译后为

其中代表父级元素的& 只可出现在头部,否则解析不出来。

嵌套属性

CSS Code复制内容到剪贴板

.funky {

font: {

family: fantasy;

size: 30em;

weight: bold;

}

}

编译为

CSS Code复制内容到剪贴板

.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold; }

这个在一些复杂的css3属性上用处比较大,比如animate

字符串内插

使用#{}作为选择器变量

CSS Code复制内容到剪贴板

$name: foo;

$attr: border;

p.#{$name} {

#{$attr}-color: blue;

}

p {

$font-size: 12px;

$line-height: 30px;

font: #{KaTeX parse error: Expected 'EOF', got '}' at position 10: font-size}̲/#{line-height};

}

第二个例子如果不用字面量则12除30

运算符

CSS Code复制内容到剪贴板

p {

width: 1in + 8pt;

}

单位如果可以转换,会被自动转换

编译为:

CSS Code复制内容到剪贴板

p {

width: 1.111in; }

p {

font: 10px/8px; // Plain CSS, no division

$width: 1000px;

width: $width/2; // Uses a variable, does division

width: round(1.5)/2; // Uses a function, does division

height: (500px/2); // Uses parentheses, does division

margin-left: 5px + 8px/2px; // Uses +, does division

}

直接字面量,变量使用,函数,括号,优先级

以上编译为

CSS Code复制内容到剪贴板

p {

font: 10px/8px;

width: 500px;

height: 250px;

margin-left: 9px;

}

颜色:

CSS Code复制内容到剪贴板

p {

color: #010203 + #040506;//相加 rbg三位分别相加

color: #010203 * 2;//相乘

color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//带alpha通道的叠加

color: opacify($translucent-red, 0.3);//控制透明的函数,加强非透明

background-color: transparentize($translucent-red, 0.25); //控制透明的函数,加强透明

}

默认变量:

CSS Code复制内容到剪贴板

$content: “First content”;

$content: “Second content?” !default;

$new_content: “First time reference” !default;

#main {

content: $content;

new-content: $new_content;

}

!default 如变量被赋值使用之前的赋值,没被赋值,赋值

https://www.jianshu.com/p/6ac9f238e6eb

很好用的CSS,960 Grid System Version 1.5 2010-05-11 Created by Nathan Smith. See the official site for more info: http://960.gs/ ============================================================================ Thank you for downloading the 960 Grid System. I hope it helps to streamline web development workflow. Enclosed in the bundle are printable sketch sheets and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio. Also included is a lightweight CSS file, which contains the grid dimensions. To use this file, simply include the 960.css in the <head> of the HTML page. You may also use the reset.css and text.css files, or opt to leave them out. Here is an example of the XHTML code necessary to incorporate the CSS files: <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> It is worth noting that these styles do not automatically make up a finished site design. They are simply a starting point, ideally for rapid prototyping or as a basis for creating your own designs. You should not feel constrained by the way I have built the initial code. If you disagree with how something has been done, feel free to revise it for the needs of your particular site. The files in the 960 Grid System are free of charge, licensed under GPL/MIT. ============================================================================ Note that if you are building a site in a language which reads from right to left, use the CSS files that begin with "rtl_" instead. Denote the language: <html lang="..." dir="rtl"> Be sure to replace "..." with the appropriate two-letter abbreviation of the language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic. ============================================================================ Special thanks to Eric Meyer for his comprehensive browser reset stylesheet. http://meyerweb.com/eric/tools/css/reset/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值