scss-@media
首先回顾下css3中的@media
定义和使用:
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
实例:如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
@media功能在scss和在css中基本一样,只是增强了一下。
scss允许@media在css规则中进行嵌套,如果@media嵌套在CSS规则内,编译时,@media将被编译到文件的最外层,包含嵌套的父选择器,scss代码实例如下:
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译成css代码如下:
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media的queries允许互相嵌套使用,编译时,scss自动添加and。
代码实例如下:
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
编译后的css代码如下:
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media当然也可以使用scss中的变量、运算符以及函数,代码实例如下:
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5; @media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
被编译后的css代码如下:
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px;
}
}
scss-@media的更多相关文章
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- LESSCSS的几点摘要
字符串插值 变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中: @base-url: "http://assets.fnord.com" ...
- LESS详解之编译LESS
掌握LESS,必须先掌握LESS的编译.因为LESS是CSS预处理语言的一种,是一种动态语言.LESS可以运行在各种语言和环境中,包括浏览器端.服务器端等.就因为是一种CSS预处理语言,所以需要编 ...
- 前端网页打印插件print.js(可导出pdf)
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
- 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。
回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- scss 学习笔记
由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
随机推荐
- MongoDB集群配置笔记
firewall-cmd --query-port=27017/tcp yum install system-config-firewall-tui firewall-cmd --zone=publi ...
- ob系列函数归纳
输出控制函数(output control函数) flush — 刷新输出缓冲ob_clean — 清空(擦掉)输出缓冲区ob_end_clean — 清空(擦除)缓冲区并关闭输出缓冲ob_end_ ...
- Android 程序调试技巧汇总
1.Android Studio 引入一个项目作为library https://www.cnblogs.com/lixiangyang521/p/7453322.html 2.Android Stu ...
- C++_类入门2-使用类
进一步探讨类的特征,重点是类设计技术,而不是通用原理.一些特性很容易,一些特性很微妙. 运算符重载 目的是使C++操作更美观,更接近于内置类型的操作. 隐藏了内部的实现机理,并强调了实质. 格式:op ...
- 使用Git向GitHub上上传代码
参考:http://www.cnblogs.com/yxhblogs/p/6130995.html 如果遇到[git无法pull仓库refusing to merge unrelated histor ...
- Loj 6433. 「PKUSC2018」最大前缀和 (状压dp)
题面 Loj 题解 感觉挺难的啊- 状压\(dp\) 首先,有一个性质 对于一个序列的最大前缀和\(\sum_{i=1}^{p} A[i]\) 显然对于每个\(\sum_{i=p+1}^{x}A[i] ...
- asp.net 同时执行js事件和代码事件 导出 excel
onclick="return bnQuery_onclick()" onserverclick="bnQuery_ServerClick" public ...
- POJ2248 Addition Chains 迭代加深
不知蓝书的标程在说什么,,,,于是自己想了一下...发现自己的代码短的一批... 限制搜索深度+枚举时从大往小枚举,以更接近n+bool判重,避免重复搜索 #include<cstdio> ...
- 118th LeetCode Weekly Contest Powerful Integers
Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j for some ...
- POJ - 2248 迭代加深
枚举ak的值 反向枚举使ak尽快到达最短链的n /*H E A D*/ int n,m,a[23333],dep; bool dfs(int x){ if(a[x-1]>n||a[x-1]< ...