在实战中使用Sass和Compass

2024-08-27 13:48
文章标签 实战 使用 sass compass

本文主要是介绍在实战中使用Sass和Compass,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第三章 无需计算玩转CSS网格布局

3.1 网格布局介绍

3.2 使用网格布局

3.2.1 术语
1 术语名             定义                      是否涉及HTML标签
2 列           内容度量的垂直单位                    否
3 容器         构成一个网格布局的HTML元素             是
4 槽           网格布局中列与列之间的统一留白          否
3.2.3 固定的网格布局还是流动的网格布局
1 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择:
2 // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出);
3 // 2.要么实现一种灵活的流动布局,让内容自适应用户的屏幕,甚至当浏览器窗口大小改变时也会自适应;

3.3 使用Blueprint

1 // Blueprint把一些通用的对网格布局/段落和表格进行样式修饰的CSS技术打包到一个框架中,然后可以在各个项目中通用这个框架;
2 // 安装Blueprint
3 C:\Users\DELL>gem install compass-blueprint
3.3.2 使用Compass应用Blueprint
复制代码
 1 // 创建一个基本的Blueprint项目
2 C:\Users\DELL>compass create simple --using blueprint/basic
3 directory simple/
4 directory simple/images/
5 directory simple/sass/
6 directory simple/sass/partials/
7 directory simple/stylesheets/
8    create simple/config.rb
9    create simple/sass/screen.scss
10    create simple/sass/partials/_base.scss
11    create simple/sass/print.scss
12    create simple/sass/ie.scss
13    create simple/images/grid.png
14     write simple/stylesheets/ie.css
15     write simple/stylesheets/print.css
16     write simple/stylesheets/screen.css
17 
18 // 在screen.scss文件生成↓↓↓↓↓↓↓↓↓↓:
19     // This import applies a global reset to any page that imports this stylesheet.
20     @import "blueprint/reset";              // 默认的Blueprint重置模块;
21 
22     // To configure blueprint, edit the partials/_base.sass file.
23     @import "partials/base";                // 网格布局设置;
24 
25     // Import all the default blueprint modules so that we can access their mixins.
26     @import "blueprint";                    // 让Blueprint的模块可用;
27 
28     // Import the non-default scaffolding module.
29     @import "blueprint/scaffolding";        // 引入脚手架;
30 
31     // Generate the blueprint framework according to your configuration:
32     @include blueprint;                     // 生成网格布局;
33 
34     @include blueprint-scaffolding;         // 表单和其他Blueprint元件;
复制代码
3.3.3 使用Compass应用无需类名的Blueprint
复制代码
 1 C:\Users\DELL>compass create simple --using blueprint/semantic
2 
3 Sass:
4     #container {
5         @include container;
 6     }
7 CSS:
8     #container {
9       width: 950px;
10       margin: 0 auto;
11       overflow: hidden;
12       *zoom: 1;
13     }
复制代码

3.4 使用960网格布局系统

复制代码
 1 // 安装960系统;
2 C:\Users\DELL>gem install compass-960-plugin
 3 
4 // 创建一个960网格系统的Compass项目
5 C:\Users\DELL>compass create -r ninesixty twelve_col --using 960
6 directory twelve_col/
7 directory twelve_col/sass/
8 directory twelve_col/stylesheets/
9    create twelve_col/config.rb
10    create twelve_col/sass/grid.scss
11    create twelve_col/sass/text.scss
12     write twelve_col/stylesheets/grid.css
13     write twelve_col/stylesheets/text.css
复制代码

3.5 通过Compass处理垂直韵律

1 @import "compass/typography";       // 引入段落模块;
2 $base-font-size:16px;               // 声明字体大小;
3 $base-line-height:24px;
4 @include establish-baseline;
5 h1 { @include adjust-font-size-to(48px); }
3.5.2 前置和后置
复制代码
 1 // leader混合器在元素前加一个基线单位的外间距;
2 // trailer混合器在元素的后边加了一个基线单位的外间距;
3 p { @include leader; @include trailer; }
4 Sass:
5     p { 
6       @include leader;
7       @include trailer;
8     }
9 CSS:
10     p {
11       margin-top: 1.5em;
12       margin-bottom: 1.5em;
13     }
复制代码

3.6 小结

1 // 流行的CSS网格框架如何简化维护留白和快速构建原型设计;
2 // 通过添加一些CSS类,就可以创建彼此之间有统一间距的竖列内容;

 

第四章 有Compass不再枯燥

// 使用Compass重置浏览器默认样式;

// 改进样式表排版的Compass辅助器;

// 使用Compass创建粘滞的页脚/多样化的表格以及浮动;

4.1.1 全局样式重置--global-reset
4.1.2 通过有针对性的样式重置进行更多控制
复制代码
1 @import "compass/reset/utilities";
2 >1.HTML5样式重置--@include reset-html5
3 >2.Compass文档中更多的样式重置
4     >>1.reset-box-model:移除元素的内边距和边框;
5     >>2.reset-font:重置文字的字号和基线;
6     >>3.reset-focus:移除浏览器提供的轮廓线;
7     >>4.reset-table和reset-table-cell:重置表格的边框和对齐方式;
8     >>5.reset-quotation:为<blockquotes>添加仅存在于样式表中的双引号;
复制代码

4.2 更快更直观的排版辅助工具

4.2.1 链接辅助工具
1 >1.为链接配色;
2     a { @include link-colors(#333,#00f,#f00,#555,#f00); }
3 >2.通过hover-link设置悬停样式(设置下划线);
4     a { @include hover-link }
5 >3.通过unstyled-link设置隐性的链接(去掉颜色/光标样式/下划线);
6     p.secret a { @include unstyled-link }
4.2.2 列表辅助工具--创建各种各样的列表
复制代码
 1 >1.用pretty-bullets装点列表(利用背景图片显示列表的项目符号)
2     ul.features {
3         @include pretty-bullets('pretty-bullet.png');
 4     }
5 >2.通过no-bullet和no-bullets去掉项目符号
6     li.no-bullet { @include no-bullet }             // 去掉li类no-bullet的符号;
7     ul.no-bullet { @include no-bullets }            // 去掉整个列表的项目符号;
8 >3.轻松横向排布
9     // horizontal-list混合器有两个参数:$padding(内边距)和$direction(浮动方向);
10     ul.nav { @include horizontal-list }      
11     ul.nav { @include horizontal-list(7px,right) } // 列表水平排列;
12 >4.用inline-list处理内联列表
13     ul.words { @include delimited-list }            // 将列表设置成内联的样式;
14     ul.words { @include delimited-list("!") }       // 自定义分隔符;
复制代码
4.2.3 文本辅助工具--用辅助工具征服文字
1 >1.用省略号代表截断内容(text-overflow:ellipsis);
2     td.dot { @include ellipsis; }
3 >2.用nowrap防止文本折行
4     td { @include nowrap }
5 >3.用replace-text将文字替换图片
6     h1.coffee { @include replace-text("coffee-header.png") }

4.3 布局辅助工具

4.3.1 粘滞的页脚

// 生成一个高40px的页脚,并且始终在最下面;

1 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};
4.3.2 可伸展元素

// 元素绝对定位,距离边界5px;

1 // stretch混合器有4个参数:$offset-top/$offset-right/$offset-bottom/$offset-left;
2 a.logo { @include stretch(5px,5px,5px,5px) }

4.4 小结

// 本章,我们了解了Compass省时省力的工具;

// 包括:链接/列表/文本/布局;

 

第五章 通过Compass使用CSS3

// 用Compass的CSS3模块创建跨浏览器的CSS3样式表

// 在低版本IE中支持一些CSS3的特性

// Compass里的CSS3高阶技能

5.1 新属性:浏览器前缀

复制代码
 1 // 引入CSS3模块
2 @import "compass/css3";
 3 Sass:
4     .notice {
5         @include border-radius(5px);
6     }
7 CSS:
8     .notice {
9         -moz-border-radius: 5px;
10         -webkit-border-radius: 5px;
11         border-radius: 5px;
12     }
复制代码

5.2 通过Compass使用CSS3

5.2.1 圆角
1 button.rounded {
2     @include border-radius (5px);
3 }
5.2.2 CSS3阴影--text-shadow和box-shadow
复制代码
 1 Sass:
2     $shadow-1:rgba(#000,.5) -200px 0 0;
3     $shadow-2:rgba(#000,.3) -400px 0 0;
4     h2 {
5         @include box-shadow($shadow-1);
 6         @include text-shadow($shadow-1,$shadow-2);
 7     }
8 CSS:
9     h2 {
10       -moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
11       -webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
12       box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
13       text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;
14     }
复制代码
5.2.3 颜色渐变
复制代码
 1 #pattern {
2     @include background(
3         linear-gradient(
4             360deg,
5             #bfbfbf 0%,
6             #bfbfbf 12.5%
7             #bfbf00 12.5%,
8             #bfbf00 25%,
9             ...
10         )
11     );
12     width:400px;
13     height:300px;
14 }
复制代码
5.2.4 用@font-face嵌入字体
1 @include font-face ("ChunkFiveRegular",
2     font-files("ChunkFiveRegular-webfont.woff",woff,
3                "ChunkFiveRegular-webfont.woff",ttf, 
4                "ChunkFiveRegular-webfont.woff",svg,
5                "ChunkFiveRegular-webfont.woff",normal,normal));

5.4 小结

// 使用CSS3混合器实现:圆角/阴影/渐变以及文字引入;

这篇关于在实战中使用Sass和Compass的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111842

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]