标签：CSS

2023-04-10阅读(922)

插值几乎可以在Sass样式表的任何地方使用，以将SassScript表达式的结果嵌入到CSS 块中。只需将表达式包装#{}在以下任意位置： 样式规则中的选择器 声明中的属性名称 自定义属性值 CSS 规则 @extends 纯CSS @im...

2023-04-10阅读(1015)

Sass 变量很简单：为以 $ 开头的名称赋值，然后可以引用该名称而不是值本身。但是，尽管它们很简单，但它们是 Sass 带来的最有用的工具之一。变量可以减少重复、进行复杂的数学运算、配置库等等。 变量声明 变量声明看起来很像属性声明：它写...

2023-04-10阅读(1193)

Sass注释 Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如： 编译为 CSS 结果： 将 ! 作为多行注释的...

2023-04-10阅读(830)

嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如： 编译为 CSS 结果： 嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理： 编...

2023-04-10阅读(741)

我们的教程使用的是 cnpm 安装的 sass，安装完成后可以查看版本： 接下来我们创建一个 runoops-test.scss 文件，内容为： 然后在命令行输入下面命令，即将 .scss 文件转化的 css 代码： 我们可以在后面再跟一个...

2023-04-09阅读(2946)

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理...

2023-04-06阅读(722)

本章节为大家介绍响应式 Web 设计框架 Bootstrap。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快...

2023-04-06阅读(1038)

使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。 使用...

2023-04-06阅读(768)

使用 width 属性 如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能： 注意在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。 使用 max-wi...

2023-04-05阅读(642)

媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 如果浏览器窗口小于 500px, 背景将变为浅蓝色： 添加断点 在先前的教程中我们使用行和列来...