SASS组件开发

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

SASS组件开发

SASS预处理器，增加了css所没有的编程能力，带来了前端开发的效率提高，以及扩展了css的编写技巧。

组件开发

设计一个表单提示层（包括成功success，警告warning，错误等状态error）组件，css需要定义基本样式字体（font-）、外内边距（padding，margin）、显示方式（display）、边框（border）以及其他相关的内容，再为单独的状态定义需要的样式。

css组件开发

先定义基本样式，再对每一个状态定义一套样式

.tips { /* 基本颜色设置 */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

//成功状态
.tips-success{
    background-color: #47a447;
    color: #fff;
}

//警告状态
.tips-warning{
    background-color: #ed9c28;
    color: #fff;
}

//错误状态
.tips-error{
    background-color: #ed9c28;
    color: #fff;
}

每一种状态文字和边框颜色需要单独设置，稍显繁琐。后期扩展其它状态，如信息info、危险dange等，就是工作成本的提高。幸好SASS提供了编程能力，为我们解决这种担忧，提高了工作效率。

sass组件开发

组件是对数据和方法的简单封装。

变量默认值!default

先来看一段js的变量声明代码

var a = 1;
console.log(a);//1

再看一段sass代码，是不是很简单。

$color:blue;
$color:red; !default;//变量申明带有!default，表示当前值为缺省值
p{
    color:$color;//输出blue
}

声明!default，在这里输出blue，很有趣吧。简单说下它的作用：假设变量申明带有!default，表示此变量为默认值，可被全局的普通声明覆盖。这点还不能体现它的伟大作用。

@mixin应用
  • 先声明@mixin
  • 在需要的地方使用@include来声明调用mixins。 
    /* mixin */
@mixin tips($background,$text-color,$tipsStylePadding) {
    background-color: $background;
    color: $text-color;
    padding: $tipsStylePadding;
    margin-bottom: 20px;
    border-radius: 4px;
}

调用功能模块，当前的组件可扩展出多个组件样式。

//成功状态
.tips-success {
  @include tips($background,$text-color,$tipsStylePadding);
}

//警告状态
.tips-warning {
  @include tips($background,$text-color,$tipsStylePadding);
}

//错误状态
.tips-error {
  @include tips($background,$text-color,$tipsStylePadding);
}

//信息状态（再扩展一个）
.tips-info {
  @include tips($background,$text-color);,$tipsStylePadding
}

@include在需要的地方随意调用，不够规范，后期难以维护。

组件实例
  • 现在我们新建个scss文件，这里暂且叫做_tips.scss。

    /* 变量
---------------------------------*/
$background:         #47a447 !default;
$text-color:         #fff !default;
$tipsStylePadding:   15px !default;
/* mixin
---------------------------------*/
@mixin tips($background,$text-color,$tipsStylePadding) {
    background-color: $background;
    color: $text-color;
    padding: $tipsStylePadding;
    margin-bottom: 20px;
    border-radius: 4px;
}
/*样式
---------------------------------*/
//成功状态
.tips-success {
  @include tips($background,$text-color,$tipsStylePadding);
}

//警告状态
.tips-warning {
  @include tips($background,$text-color,$tipsStylePadding);
}

//错误状态
.tips-error {
  @include tips($background,$text-color,$tipsStylePadding);
}

//信息状态（再扩展一个）
.tips-info {
  @include tips($background,$text-color,$tipsStylePadding);
}

接下来我们要在所需要的文件，调用这个文件，这个组件就开发完了

//导入_tpis.scss
@import ‘_tips‘;

问题？

  • 组件是重复可调用的，也是对数据和方法的简单封装
  • 如果我们对默认的padding为15px不满意，要改为5px，怎么弄

重新覆写

重新覆写，会产生相同的代码，这不是我们想要的组件

//导入_tips.scss
@import ‘_tips‘;
.tips-success{
     padding:5px;
}
/*编译后样式
---------------------------------*/
.tips-success{
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    padding: 5px;
}

修改参数

改变@include的参数，同样会产生相同的代码，也不是我们想要的组件

//导入_tips.scss
@import ‘_tips‘;
.tips-success{
   @include tips($tipsStyleBorder,5px);
}
/*编译后样式
---------------------------------*/
.tips-success{
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}

正确解决方法

这里就需要使用 !default;特性

//申明$tpisStylePadding为5px
$tpisStylePadding:  5px;

//导入_tips.scss
@import ‘_tips‘;

/*编译后样式
---------------------------------*/
.tips-success {
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}

变量设计原则

  • 所有变量为默认值，后面加有!default，以方便覆盖；
  • 有些变量为开关变量，值只能是true或false，可以用来表示是否输出样式，应用于兼容及控制代码；
  • 有些变量为复合变量，一个变量会有几个值，以减少变量个数。

参考文档

时间： 2024-07-31 07:55:47

SASS组件开发的相关文章

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

[转]详解C#组件开发的来龙去脉

C#组件开发首先要了解组件的功能,以及组件为什么会存在.在Visual Studio .NET环境下,将会有新形式的C#组件开发. 组件的功能 微软即将发布的 Visual Studio .NET 将使程序开发人员获得一个集成开发环境,它不但为开发传统的 C/C++ 应用程序,而且也为令人振奋的Microsoft .NET 组件提供了丰富的工具.这些以管理代码编写.在通用语言运行时构建的组件向开发人员提供了一个全新的混合开发环境,即象 Microsoft Visual Basic 一样容易,而同

ActiveX组件开发和使用

ActiveX控件的概念  (COM组件的应用) 1 什么是ActiveX控件 基于COM组件技术的,使用与一般控件一样方便.与一般控件的区别是,它可以被任何支持COM标准的计算机程序使用. 2 什么是COM组件 组件实现了某种功能的一些小的二进制文件,通过接口对外提供服务. 一个项目生成一个exe文件 一个项目由 一个或者多个exe文件 + 一个或者多个组件.组件与组件直接通过接口交互.有更好的复用性和可维护性. 3 什么是接口? C  语言 - 接口就是函数 C++语言 - 接口就是公有的成

运用BeautyEye组件开发Swing登录界面Demo

import org.jb2011.lnf.beautyeye.BeautyEyeLNFHelper; import org.jb2011.lnf.beautyeye.ch3_button.BEButtonUI; import org.jb2011.lnf.beautyeye.ch8_toolbar.BEToolBarUI; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListen

拖拽的组件开发

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolut

基于唯一状态的前端组件开发

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法.什么是唯一状态,採用唯一状态渲染究竟有什么优点. 希望大家看到这篇文章以后不用不论什么框架也能够写出基于唯一状态渲染的前端组件. 基于唯一状态的组件的开发模式就是组件内部永远仅仅存在一份数据来表示组件的状态,而且更新组件时仅仅仅仅使用这一份数据. 这样的开发模式的优点.主要体如今以下两个方面 降低事件与Dom元素的联系 便于保存和恢复组件的状态 降低事件与Dom元素的联系 我们先来看一段传统开发页面交互逻辑时写的代码:

javascript组件开发之基类继承实现

上一篇文章大概的介绍了一下关于javascript组件的开发方式,这篇文章主要详细记一下基类的编写,这个基类主要是实现继承的功能 为什么要封装基类? 由于这次重构项目需要对各种组件进行封装,并且这些组件的实现方式都差不多,为了便于管理,让代码尽量统一,所以到对组件封装一个base基类(javascript没有类的概念,暂且这样叫吧),关于javascript的oo实现:可以参考这篇文章javascript oo实现:写得很赞,膜拜,我改写的这个基于John Resig的实现方式. 基类的封装方式