Sass与Web组件化相关的功能

时间:2022-10-25 10:43:39

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&period;js组件化方案

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

随机推荐

  1. SQLServer如何添加try catch

    在.net中我们经常用到try catch.不过在sqlserver中我们也可以使用try catch捕捉错误,在这里把语法记录下来和大家分享一下, --构建存储过程CREATE PROCEDURE ...

  2. cat命令

    [cat]          合并文件和打印到标准输出 命令格式: cat [OPTION]... [FILE]... 命令功能: 拼接文件或者做标准输入输出 命令格式: cat [OPTION].. ...

  3. csharp&colon; ODP&period;NET&comma;System&period;Data&period;OracleClient&lpar;&period;net 4&period;0&rpar; and System&period;Data&period;OleDb读取Oracle g 11&period;2&period;0的区别

    ODP.NET: 引用: using Oracle.DataAccess; //Oracle g 11.2.0 using Oracle.DataAccess.Client; using Oracle ...

  4. 用dos命令备份和恢复sql server 数据库

    这里是批处理命令-----备份的 delete d:\restore\cw_ft.bak delete d:\restore\cw_sd.bak sqlcmd -i "bak.sql&quo ...

  5. python---dnspython

    dnspython 是Python实现的一个DNS工具包,支持几乎所有的记录类型,可以用于查询,传输并动态更新ZONE信息,同时支持TSIG(事务签名)验证消息和EDNS0(扩展DNS).可以替代ns ...

  6. 提高Visual Studio开发性能的几款插件

    通过打开Visual Studio,单机TOOLS—Extensions and Updates-Online-Visual Studio Gallery(工具-扩展和更新-联网-Visual Stu ...

  7. The type java&period;lang&period;String cannot be resolved&period; It is indirectly referenced from required &period;class files

    最近在做J2ME开发项目,配置环境一切OK,但是打开项目时某些文件提示: The type java.lang.String cannot be resolved. It is indirectly ...

  8. HDU1159-Common Subsequence-LCS

    上次写题解写到一半,写的比较具体,没写完,忘记存草稿了...导致现在没心情了. Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    ...

  9. C语言&lowbar;scanf&lpar;&rpar;和getchar&lpar;&rpar; 使用&lbrack;粗俗易懂&rsqb;

    原文地址:http://blog.csdn.net/hao5743/article/details/6939661/,以下是我重新整理的以下. 问题描述一:[分析scanf()和getchar()读取 ...

  10. Oracle 12c 静默安装&lpar;脚本自动化&rpar;

    oracle 12C 自动化静默安装脚本 项目地址: github: https://github.com/spdir/oracle-single-install 下载安装脚本 wget https: ...