Sass
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[2][3] After its initial versions, Weizenbaum and Chris Eppstein continu
官网
http://sass-lang.com
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
认识:
实际上Sass规定了一套CSS语法, 此语法不是在浏览器上执行的, 而是为了编写css文件便利, 以及维护便利, 由Sass工具在编译环境中,将sass文件转换为css文件, 此文件可以在浏览器上跑。
http://sass-lang.com/guide
git
https://github.com/sass/sass
安装:
http://sass-lang.com/install
http://www.ruanyifeng.com/blog/2012/06/sass.html
功能
http://sass-lang.com/guide
Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}
Nesting
不过太深的嵌套, 也不利于维护, 不建议使用。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
} li { display: inline-block; } a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Partials
The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the
@import
directive.
_partial.scss
Import
// _reset.scss html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss @import 'reset'; body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
} .box { @include border-radius(10px); }
Extend/Inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
} .success {
@extend .message;
border-color: green;
}
Operators
.container { width: 100%; } article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
组件化相关
组件化牵扯到如下功能:
1、 Partials, 保证每个组件的css文件可以独自管理。
2、 Extends/Inheritance, 继承 可以保证相同组件, 继承同一个父亲样式。
3、 Mixins, 可以让相同功能的一套代码, 以函数的方式, 定义在一起。
4、 Imports, 保证容器控件, 可以组合容器中子控件的样式。
动手实验
1 官方介绍的ruby gem安装方法:
http://sass-lang.com/install
安装完 ruby, 再执行gem install sass, 结果报错。 应该是国内被墙了。
2 解决方法, 下载 sass gem 文件
https://rubygems.org/gems/sass/versions/4.0.0.alpha.1
3 安装此gem文件, gem install --local filename.gem。
http://www.cnblogs.com/tambor/archive/2011/12/25/Ruby_gem_Windows_mysql.html
4 实验demo
https://github.com/sunningQD/sass
Sass与Web组件化相关的功能的更多相关文章
-
atitit.  web组件化原理与设计
atitit. web组件化原理与设计 1. Web Components提供了一种组件化的推荐方式,具体来说,就是:1 2. 组件化的本质目的并不一定是要为了可复用,而是提升可维护性. 不具有复用 ...
-
Lightning Web Components 来自salesforce 的web 组件化解决方案
Lightning Web Components 是一个轻量,快速,企业级别的web 组件化解决方案,官方网站也提供了很全的文档 对于我们学习使用还是很方便的,同时我们也可以方便的学习了解salesf ...
-
漫谈Nuclear Web组件化入门篇
目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...
-
探讨Web组件化的实现
CMS组件化,简单架构示意图: Web组件使用WebPage+WebAPI的好处: Ø 组件复用(组件条件管理页面复用+获取组件数据API复用). Ø 组件是分布式的第三方应用,本身高内聚.组件之 ...
-
2017年试试Web组件化框架Omi
Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/omi ...
-
Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
-
Omi v1.0震撼发布 - 开放现代的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
-
web组件化开发第一天
技术选型 html5 css3 jq 应用的插件 FullPage.js 一.建一个测试页面,测试静态的功能 <!DOCTYPE html> <html> <head&g ...
-
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
随机推荐
-
SQLServer如何添加try catch
在.net中我们经常用到try catch.不过在sqlserver中我们也可以使用try catch捕捉错误,在这里把语法记录下来和大家分享一下, --构建存储过程CREATE PROCEDURE ...
-
cat命令
[cat] 合并文件和打印到标准输出 命令格式: cat [OPTION]... [FILE]... 命令功能: 拼接文件或者做标准输入输出 命令格式: cat [OPTION].. ...
-
csharp: ODP.NET,System.Data.OracleClient(.net 4.0) and System.Data.OleDb读取Oracle g 11.2.0的区别
ODP.NET: 引用: using Oracle.DataAccess; //Oracle g 11.2.0 using Oracle.DataAccess.Client; using Oracle ...
-
用dos命令备份和恢复sql server 数据库
这里是批处理命令-----备份的 delete d:\restore\cw_ft.bak delete d:\restore\cw_sd.bak sqlcmd -i "bak.sql&quo ...
-
python---dnspython
dnspython 是Python实现的一个DNS工具包,支持几乎所有的记录类型,可以用于查询,传输并动态更新ZONE信息,同时支持TSIG(事务签名)验证消息和EDNS0(扩展DNS).可以替代ns ...
-
提高Visual Studio开发性能的几款插件
通过打开Visual Studio,单机TOOLS—Extensions and Updates-Online-Visual Studio Gallery(工具-扩展和更新-联网-Visual Stu ...
-
The type java.lang.String cannot be resolved. It is indirectly referenced from required .class files
最近在做J2ME开发项目,配置环境一切OK,但是打开项目时某些文件提示: The type java.lang.String cannot be resolved. It is indirectly ...
-
HDU1159-Common Subsequence-LCS
上次写题解写到一半,写的比较具体,没写完,忘记存草稿了...导致现在没心情了. Common Subsequence Time Limit: 2000/1000 MS (Java/Others) ...
-
C语言_scanf()和getchar() 使用[粗俗易懂]
原文地址:http://blog.csdn.net/hao5743/article/details/6939661/,以下是我重新整理的以下. 问题描述一:[分析scanf()和getchar()读取 ...
-
Oracle 12c 静默安装(脚本自动化)
oracle 12C 自动化静默安装脚本 项目地址: github: https://github.com/spdir/oracle-single-install 下载安装脚本 wget https: ...