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组件化相关的功能的更多相关文章

  1. atitit.  web组件化原理与设计

    atitit.  web组件化原理与设计 1. Web Components提供了一种组件化的推荐方式,具体来说,就是:1 2. 组件化的本质目的并不一定是要为了可复用,而是提升可维护性. 不具有复用 ...

  2. Lightning Web Components 来自salesforce 的web 组件化解决方案

    Lightning Web Components 是一个轻量,快速,企业级别的web 组件化解决方案,官方网站也提供了很全的文档 对于我们学习使用还是很方便的,同时我们也可以方便的学习了解salesf ...

  3. 漫谈Nuclear Web组件化入门篇

    目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...

  4. 探讨Web组件化的实现

    CMS组件化,简单架构示意图: Web组件使用WebPage+WebAPI的好处: Ø  组件复用(组件条件管理页面复用+获取组件数据API复用). Ø  组件是分布式的第三方应用,本身高内聚.组件之 ...

  5. 2017年试试Web组件化框架Omi

    Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/omi ...

  6. Omi v1.0震撼发布 - 令人窒息的Web组件化框架

    原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...

  7. Omi v1.0震撼发布 - 开放现代的Web组件化框架

    原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...

  8. web组件化开发第一天

    技术选型 html5 css3 jq 应用的插件 FullPage.js 一.建一个测试页面,测试静态的功能 <!DOCTYPE html> <html> <head&g ...

  9. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

随机推荐

  1. MVC和WebForm 中国省市区三级联动

    MVC和WebForm是微软B/S端的两条腿,两种不同的设计理念,相对来说MVC更优于WebForm对于大数据的交互,因为WebForm是同一时间传输所有数据,而MVC它只是传输所用到的数据,更精确, ...

  2. Linux下搭建个人网站

    前不久在阿里买了一个服务器,然后开始第一次尝试搭建自己的个人网站.前端采用了bootstrap框架,后端采用的是PHP,数据库使用的是Mysql.新手第一次在linux下搭建遇见很多问题,在这里分享一 ...

  3. SQL Server 日期字段作为查询标志字段的注意事项

    今天在做一个数据抽取程序时遇到一个问题困扰好久才解决,这不是技术问题,而是常识和细心的问题.写出来让大家引起重视一下. 由于之前的程序长期用Oracle,并且数据标志字段采用的日期类型.在Oracle ...

  4. Linux下redis的安装

    第一部分:安装redis 希望将redis安装到此目录 /usr/local/redis 希望将安装包下载到此目录 /usr/local/src 那么安装过程指令如下: $ mkdir /usr/lo ...

  5. MySQL sql_safe_updates 分析

    我在练习MySQL操作语句时,使用一条完全没有错误的语句: update students set name='drake' where name='chuan'; 却报了如下错误: Error Co ...

  6. iOS TTF文件使用---改变字体

    TTF(True Type Font):是一种字库名称 TTF文件:是Apple公司和Microsoft公司共同推出的字体文件格式 使用: 1 获取字体文件 从各种渠道下载字体ttf,网站或从别的ip ...

  7. apache 虚拟目录

    补充:必须使用80端口才能正常使用  C:\Windows\System32\drivers\etc\hosts 最后添加上: 127.0.0.1 shenyi.com 127.0.0.1 offli ...

  8. JSP 简介

      160901   1. 一句话介绍什么是JSP? 和java相关的技术,可以开发出动态的,高性能的Web应用程序,的一门开发语言   2. 优点即特点,那么jsp的优点有哪些呢? JSP实现的We ...

  9. MySQL配置文件my.cnf 例子最详细翻译

    转的 MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用. #BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载 ...

  10. ZOJ 2771

      Description Considering a light entering three adjacent planes of glass. At any meeting surface, t ...