关于CSS 和 SCSS

最新推荐文章于 2024-08-20 13:16:49 发布
最新推荐文章于 2024-08-20 13:16:49 发布
阅读量3.7k 收藏 1
点赞数 1
文章标签： 新手 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35740668/article/details/80964159
版权

SCSS的嵌套

.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 1000px;
.login-wrapper {
width: 100%;
height: 100%;
background: url( "../../../../assets/img/mpass-login-bg.jpg") top center no-repeat;
background-size: cover;
position: relative;
min-height: 640px;
.login-foot {
position: absolute;
bottom: 5px;
height: 80px;
line-height: 80px;
width: 100%;
border-top: rgba( 255, 255, 255, .15) 1px solid;
.copyright {
text-align: center;
color: white;
}
}
}
}


转为CSS

.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 1000px;
}

.login-wrapper {
width: 100%;
height: 100%;
background: url( "../../../assets/img/mpass-login-bg.jpg") top center no-repeat;
background-size: cover;
position: relative;
min-height: 640px;
}

.login-foot {
position: absolute;
bottom: 5px;
height: 80px;
line-height: 80px;
width: 100%;
border-top: rgba( 255, 255, 255, .15) 1px solid;
}

.copyright {
text-align: center;
color: white;
}


对于包含组件的SCSS，表示对于class为mpass-logo的组件，期中div类型使用定义好的div

.mpass-logo {
position: absolute;
top: 5%;
width: 40%;
left: 100px;
height: 120px;
padding: 20px;
border-bottom: rgba( 255, 255, 255, .15) 1px solid;
display: flex;
display: -webkit-flex;
div {
margin: auto 18px;
font-style: normal;
font-weight: 400;
color: white;
font-size: 36px;
}
}


转为css

.mpass-logo {
position: absolute;
top: 5%;
width: 40%;
left: 100px;
height: 120px;
padding: 20px;
border-bottom: rgba( 255, 255, 255, .15) 1px solid;
display: flex;
display: -webkit-flex;
}

.mpass-logo div{
margin: auto 18px;
font-style: normal;
font-weight: 400;
color: white;
font-size: 36px;
}

  • 为所有p元素指定一个样式
  • 为所有class="marked"的元素指定一个样式
  • 为所有class="marked"元素内的p元素指定一个样式

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

qq_35740668
关注
1.css和scss篇(持续更新中...)
bihu666的博客
09-12 457
0基础学前端，跨行学习并不难！
v-html关于css和scss样式问题
土匪丁的博客
01-27 599
这两天在做一个考试系统项目中在填空题方面遇到关于v-html中写class无法生效的问题 百度之后发现了一个神奇的存在：样式穿透(嘿嘿 其实我也不知道这个叫法对不对，之前有遇到过js事件穿透 嗯 活到老学到老) 这里简单写一个demo 来看下图效果 没有生效 百度了一大堆有说把scoped去掉或者写两个style,嗯效果是可以的 就是感觉有点low，另外也可以将样式写为行内样式，也是可行的，但是还是想找个更好的方法 于是乎发现css中可用>>>,scss中存在/de.
CSS和SCSS有什么区别？
qq_54039576的博客
01-23 2364
我非常了解CSS，但是对Sass感到困惑。SCSS与CSS有什么不同？如果我使用SCSS而不是CSS，它会一样工作吗？ — Urvi_204 source
CSS和SCSS的区别
最新发布
alankuo的专栏
08-20 346
SCSS 是 Sass 的一种语法格式，它基于 CSS 语法，并增加了一些功能，如变量、嵌套规则、混合（Mixin）、函数、继承等。- SCSS 允许定义变量，例如： $primary-color: #007bff;总的来说，SCSS 提供了更强大、更结构化和可维护的方式来编写样式表，而 CSS 则更简单直接。- SCSS 的导入更智能，可以将多个 SCSS 文件组合编译为一个 CSS 文件。- CSS 有 @extend 规则，但使用有限。- CSS 使用传统的纯 CSS 语法规则。
scss、sass 和 css 的区别
GoodIdea
02-21 3065
项目中，会经常使用诸如scss、sass的style样式，它们和css有什么区别呢？ less大家应该都不陌生，同样的scss、sass一样，它们都可以称为：CSS预处理器语言。 简单来说，scss和sass的区别，就在于 文件扩展名不同：“.sass”和“.scss” sass是以严格缩进式语法规则来书写的，不带大括号{}和分号; 而SCSS的语法和`CSS书写语法类似 下面介绍一下它们的编译...
CSS和SCSS之间的区别
sheji888的专栏
05-26 1262
通过在单独的 .css 文件中指定相关的 CSS，多个网页可以共享格式，减少结构上下文中的复杂性和重复性。6.重新定位：CSS 允许你定义页面上存在的 Web 元素位置的变化，通过它的实现，开发人员可以将 HTML 元素放置在他们喜欢的位置，以便与页面的美感或其他考虑因素保持一致。7.网页抓取：CSS 有助于为你的网站启用 SEO，通过将 CSS 合并到你的网页中，搜索引擎可以更轻松地在搜索结果中找到你的页面。3.易于理解和搜索：SCSS代码更易于理解和搜索，因为它的结构更清晰，使用了更自然的语法。
.scss和.css的区别,Sass/SCSS 和纯 CSS 写法的差别
weixin_34984850的博客
08-03 801
Sass 和 CSS 写法有差别：Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：Sass写法：bodycolor: #fffbackground: #f36而在 CSS 我们是这样书写：body{color:#fff;background:#...
postcss-scss:PostCSS的SCSS解析器
05-07
PostCSS SCSS语法 用于的解析器。 该模块不编译SCSS。 它只是将mixin解析为自定义规则，并将变量作为属性进行解析，以便PostCSS插件随后可以将SCSS源代码与CSS一起转换。 安装 npm --save install postcss-scss ...
Css到SCSS或SASS转换器「Css to SCSS or SASS Converter」-crx插件
03-09
将CSS转换为SASS或SCSS的简单而有用的扩展 这是一个简单但有用的扩展，将CSS直接从DevTools转换为Sass或SCSS。 当您在DevTools中编写小型css代码段时需要将它放在sass / scss文件中。 该选项卡位于“元素”的右侧，...
gulp-css-scss:Gulp插件，用于将CSS转换为Scss
04-29
const cssScss = require ( 'gulp-css-scss' ) ; gulp . task ( 'css-scss' , ( ) => { return gulp . src ( 'my-file.css' ) . pipe ( cssScss ( ) ) . pipe ( gulp . dest ( 'scss' ) ) ; } ) ; gulp . task ( ...
css-scss
02-10
**CSS与SCSS** 在网页设计领域，CSS（Cascading Style Sheets）是用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档呈现样式的一门...学习并熟练运用SCSS，能够使你的CSS编码体验和项目维护能力得到显著提升。
CSS/SCSS/LESS和自适应布局/响应式布局详解
故里2130
02-13 4286
在开发前端的时候，界面布局尤为重要，要布局的非常合理，好看，css是必不可少的，然后是各种布局，使用这些布局，进行混合搭配，最终的目的都是开发一个完整的界面。前端的技术变化是五花八门的，也是群魔乱舞的，使用的方法更是层出不穷。所以本文收集了一些个人的观点，并且进行记录。好的布局不是一下能学会的，是需要大量的实战经验，上手很快，但是精通需要一定的时间才行。
css、scss基础与进阶
gegephp的博客
04-25 557
css基础与scss基础
scss和css区别
m0_63835647的博客
06-18 2157
scss和css区别
python和sass区别_CSS、Sass、Scss，以及sass和scss的区别
weixin_39568706的博客
12-16 275
1、描述CSS 指层叠样式表 (Cascading Style Sheets)Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础...
css、css3、scss的区别与联系
qq_39877681的博客
10-28 2083
css、css3、scss
通过实例讲解CSS和SCSS他们的具体用法与区别？
web前端开发
05-07 699
来源 |https://www.geeksforgeeks.org/what-is-the-difference-between-css-and-scss/?ref=leftbar-r...
css框架scss
火火的专栏
04-01 635
css框架scss1、SASS从第三代开始，开始迎合程序员的使用习惯，放弃缩进式，以及完全兼容普通的CSS代码，这一代的SASS也称之为SCSS 对于LESS，SASS功能更加强大2、sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号； 基本使用（与less的区别） 主要是开头不一样：
Sass/SCSS和纯CSS写法对比
web工程师——小发发
08-25 457
Sass和CSS写法有差别： Sass和CSS写法的确存在一定的差异，由于Sass是基于Ruby写出来，所以其延续了Ruby的书写规范。在书写Sass时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如： Sass写法： body color:#fff background:#f36 而在CSS我们是这样书写： body{ color:#fff; background:#f36; } SCSS和CSS写法无差别： SCSS和CSS写法无差别，这也是Sass后来越来越
css和scss的区别
04-19
CSS（层叠样式表）和SCSS（Sass的一种语法扩展）是用于定义网页样式的两种技术。它们之间的区别如下： 1. 语法：CSS使用一种简单的语法来定义样式，而SCSS是Sass的一种语法扩展，它提供了更多的功能和灵活性，包括...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值