是CSS/SCSS框架生成了这个文件结构吗？如果是，是哪一个？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

怎样才能写出更好的 CSS

今天目的是：让你写出更好的 CSS。我想让你回顾一下旧项目，然后想一想：天啊，我怎么会写这样的东西？但是，你可能会想：好，你说的很对，但是 CSS 框架呢？...CSS 框架就是为了帮助我们写出更好的 CSS 代码，不是吗？当然，但是 CSS 框架也有一些缺点：它经常会使用平淡无奇的设计。 CSS 框架使得定制很困难，更不用说超越框架了。...BEM 是一种命名约定，是英文 Block Element Modifier（块元素修饰符）的缩写。这种方法可以使我们的代码结构化，并提高模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。...组织 CSS 文件：7-1模式你还跟得上节奏吗？很好！现在让我们来介绍如何组织 CSS 文件。这个部分可以真正帮助你提高工作效率，并帮助你立刻找到需要修改的 CSS 代码。...你想将所有的分块文件和 mail.css 放在一个大文件夹内，那么你会得到如下结构： sass/ _animations.scss _base.scss _buttons.scss

1.7K1 0

如何更优雅的编写CSS代码

很多程序员都不想从事 CSS 开发—我可以做任何事情，除了css以外。当我在编写app时，css是我最不喜欢的部分，但你又不能逃避它，对吗？...我今天的目的是：让你更好的编写css代码。我想让你看看你以前的项目代码，然后想：哦，天哪，我写了些神马玩意儿啊。好吧，你可能会想，你说得有道理，但不是有css框架吗？...当然，这些框架也有一些缺点：它经常导致平庸的设计定制或超越css框架会很困难在使用它们之前，你必须先学习它们毕竟，你看这篇文章是带着目的的，对吧，所以不要在纠结框架不框架了，让我们学习如何在原生...BEM 是一种命名约定，表示“块元素修饰符”。该方案可以使我们的代码更加结构化，更加模块化和更大的可复用性。现在我来解释下什么是块、元素和修饰符。块块通常被视为一个组件。...文件组织方案：7-1模式还在跟着我一起学习吗？

1.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Webpack入门

UI框架：React，因此需要将jsx转换为js代码。基本使用方法建立目录结构在D盘建一个空文件夹，webpack-tutorial，作为示例项目的根目录。...1.list.js的chunk名称是jquery，这个是由上面require.ensure方法的第三个参数定义的。后面在使用配置文件时会用到这个名称。...如果我们需要解析scss代码，就需要scss-loader，经过这个管道以后scss就转换为了css；如果需要解析ES6代码，就需要babel-loader，经过这个管道以后ES6就转换为了ES5。...注意plugins中new ExtractTextPlugin的参数，第一个参数指定了生成的css文件的位置，这个位置是相对于配置中的output.path（....正常情况下，是在src/css下编写scss文件，然后生成到dist/css中。可能你已经猜到了，我们又需要安装一个loader了：sass-loader。

1.8K2 0

我在项目中是这样配置Vue的

重读vue2.0风格指南，我整理了这些关键规则获赞 150+ 本文内容来源于小编将开源的一个基于vant封装的开箱即用框架的一部分，本框架内部集成了包括：完整项目目录结构，移动端适配，vant按需加载...gzip是Web世界中使用的最为广泛的文件压缩算法，当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法，所以如果我们在打包Vue项目的时候，可以直接将所有的静态资源压缩为...，然后在文件内添加 // 所有生产环境 const prodPlugin = [] if (process.env.NODE_ENV === 'production') { // 如果是生产环境...{html,vue,css,sass,scss} --fix", 然后执行yarn stylelint就可以对样式进行格式化，当然vscode也会在你保存文件的时候校验一次配置husky 上面配置完之后...lint-staged是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢，因为我们在提交代码的时候，只需要对已经修改过的文件进行校验，不然检查所有文件，比较浪费时间。

8713 0

在HTTP2中管理CSS和JS

但是为了利用多路复用特性，最好把你的CSS拆分到更小的文件里，这样在每个页面中只加载需要的CSS。像下面这个例子这样： <!...对于每个小的标签块，你的样式可以拆分为只包含对应的CSS。假设你正在使用最近很流行的模块化搭建你的页面，这很容易设置。管理你的SCSS文件经过一些试验，这是我最后整理的SCSS文件目录结构： ?...config 文件夹我用这个文件夹来设置所用的变量。 ? 这里最主要的文件是_index.scss，它用来输入到其他SCSS文件，这样我可以获取到变量或者mixins。...global 文件夹这个文件夹是我在每个页面都有用到的CSS。适用于网站的头部，底部，重置，字体，和其他通用样式。 ? index.scss如下所示: @import ".....; @import "components/*"; 最后一行是输入到整个组件目录的子文件夹里，在模块化中避免额外的全局样式是个捷径。

3.4K3 0

移动端H5做一个不限个数的通栏按钮 by FungLeo

,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上....如上图所示,第一个是一个通栏的按钮,第二行是两个按钮,第三行是三个按钮. 我希望通过一种CSS就能满足这所有的需求,并且,html结构异常简单才行.怎么实现?看下面的代码: html结构 <!...SASS部分首先引用reset.scss和mixin.scss,见移动端H5系列博文基础reset.scss和mixin.scss 其次,CSS部分使用SASS语法书写,如果不会的话,请参考 CSS...color: #fff; box-shadow:0 0 0 1px #F13E7A; } input {display: none;} // 如果是按钮...其实表格是很牛逼的.通过这个案例,我们利用表格,顺利的解决了这个看似困难的需求.而且完成得非常理想,非常棒. html元素远非块级元素和内联元素.有很多的属性,也需要我们去尝试和了解.看上去简单,你确定简单吗

6852 0

前端入门23-CSS预处理器（Less&Sass）声明正文-CSS预处理（less&Sass）

CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。...这是例子的项目结构： ? src 目录中存放 less 文件，dist 目录中存放转换后输出的 css 文件，所以，我的 package.json 里的脚本命令如下： ?...，但如果是 //，这种只有在 less 中支持，css 不支持，那么这种注释就不会保留，验证下： /*这是注释1*/ //这是注释2 转换成 css 文件： /*这是注释1*/ 所以，在 less 中使用注释时...Sass 和 Scss 本质是一家，Sass 早期版本的文件后缀名是 .sass，从 Sass 3 之后，因为修改了一些特性语法，Sass 更加强大且易使用，从这个版本之后的文件后缀名改成了 .scss...而且，对于选择使用 Sass，刚接触可能会有些困惑，是应该使用哪个后缀名的文件，命令是该用 sass 还是 scss 来进行转换，我也有这个困惑，但感觉好像并没有什么区别，先试着用段时间，以后熟悉了再来讲讲

1.6K3 0

Webpack 学习整理

', 'url-loader'] } ] webpack loader 可以是一个数组，数组的加载方式是从右向左，如上面这个配置，loader 执行的时候，会先使用 url-loader 加载文件，...'style-loader': MiniCssExtractPlugin.loader, 'css-loader'] }, 注意：css-loader如果是用在vue-ssr服务端构建的时候，需要配置exportOnlyLocals...文件编译为 css 文件，需要依赖 node-sass，编译为 css 之后还需要加载 css，所以还得调用 css 的加载 loader，建议写法： { test: /\.scss$/, loader.../css/index.scss”);’ 导入 index.scss 文件，发现 index.scss 中的 css 属性并没有经过 postcss 转换。...---- javascript 还需要 loader 吗？不是说 webpack 自己能加载 js 吗，为什么还需要 js 相关的 loader 呢？

5201 0

拥抱sass，抛弃compass

为了表示两者的区别，我们直接在page.scss中导入一个css文件和一个scss文件： page.scss [@import](/user/import) "reset.css"; [@import]...的scss文件则被合进了page.css，这才是我们需要的结果，需要的时候调用想用的scss文件，然后最终合并到一个css文件中。...其实几个CSS Preprocessor的基本功能都差不多，都能胜任日常的开发，但如果是做基础的css框架及组件开发的话还是sass略强点。...都有其相应的插件autoprefixer，就算是不用这些自动的前缀，也有很多专门针对css3前缀的scss文件供调用，如css3-scss sprite自动生成雪碧图当然还有更大部分使用者是朝着这个功能来的...，如果你仅是为了使用这个功能呢，替代的工具同样有的是，同样配置下自动化工具生成sprite分分钟搞定。

1.4K8 0

拥抱sass，抛弃compass

为了表示两者的区别，我们直接在page.scss中导入一个css文件和一个scss文件： page.scss [@import](/user/import) "reset.css"; [@import]...的scss文件则被合进了page.css，这才是我们需要的结果，需要的时候调用想用的scss文件，然后最终合并到一个css文件中。...其实几个CSS Preprocessor的基本功能都差不多，都能胜任日常的开发，但如果是做基础的css框架及组件开发的话还是sass略强点。...都有其相应的插件autoprefixer，就算是不用这些自动的前缀，也有很多专门针对css3前缀的scss文件供调用，如css3-scss sprite自动生成雪碧图当然还有更大部分使用者是朝着这个功能来的...，如果你仅是为了使用这个功能呢，替代的工具同样有的是，同样配置下自动化工具生成sprite分分钟搞定。

9901 0

第九十七期：前端技术的局限

最近一直在看关scss相关的内容。忽然觉得其实前端真正能用好scss这个技术的人应该没多少，大部分人其实更关注js的细节，但是其实css和scss也很值得去关注一下。...当然，我们使用的各种前端ui框架，开发这些框架的团队对scss肯定是有一定研究的。...之所以提到这个，是因为他问到了flutter这个东西。flutter我门都知道是用来做客户端开发用的，体验堪比原生应用。但是有多少人真正的掌握了这项技术呢？这个比例还是很少的。...那么存在能够适用于所有场景的技术吗？肯定是存在的，而且这些技术都是最基础的技术，但是这似乎又有些矛盾。...我们基于基础的技术，封装适用于特定场景的抽象技术，但是封装后的东西又变成了一个局限的东西，是不是有些矛盾呢？关于flutter我自己对它的理解其实也不深刻。技术这个东西本身就是一个孰能生巧的过程。

4662 0

为什么后端老是觉得前端简单?

js不再是那个只能在浏览器里蹦跶的语言了，基本啥都能写，桌面端的Electron，移动app的 WebView/Hybrid Native解决方案，各种小程序语法，哪一个不要学习成本？...就拿上传文件来说，会自己按照需求设计组件吗？会自己全盘负责联调吗？知道怎么精确监控HTTP请求全过程吗？还有websocket这种东西，大多数人写代码的贼难看。...否则你自己写CSS、LESS、SASS和SCSS吧，代码多的一批。能把前端样式写得能自适应的还懂Flex布局，真不多，CSS动画就更不用说了，CSS3这玩意可比XAML玄学多了。...d.ts文件给你指明某变量是函数还是对象。后来直接上手vue.js，data()=>{return { ???} }什么鬼，为啥是函数，往上一看extends，感情js还能玩起了继承？...这就是DOM对象吧，直到这个时候我才反应过来，之前只是听说有这么一个定义，现在浏览了下block.rnc，phrase.rnc等等定义文件，前前后后都融会贯通了起来。完犊子！

6742 0

scss,less,stylus这些css处理器该怎么选择

css作为前端三剑客，从诞生以来很少变化，css3都已经诞生了20年，和js的框架层出不穷相比，似乎css就不需要框架，就不需要更优化的写法。...预处理器便捷的附加功能使我们在书写css的时候更加高效，并且可以灵活配置。 Sass与SCSS Sass是预处理器的鼻祖，它诞生于2006年，很多后来的预处理器都从它这里借鉴了大量思想。...到目前为止，它具有两种单独的语法：Sass和SCSS。是的，Sass和SCSS只是Sass的两种语法，其中SCSS是在Sass第三个版本中引入的，它采用了和之前不一样的语法。...总结虽然我们说了这么多预处理器的好处，但是它也并不是没有缺点，比如css的调试，需要编译，文件过大都是它的缺点。...不要过多纠结到底选择哪一个css预处理器，重要的是先选择一个上手，你会发现自己会慢慢爱上它们的。

7771 0

nextjs 写 css loader 处理多地区不同基础变量的方法

那么这里就有问题是，怎么去找到这个文件，并且把引用关联找到，最后再替换，这种打包类的问题，当然 webpack 是首选。...Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。...} } ] } } 如果你自己写的 webpack 插件确实是这样就行了，但是由于我们使用的是 nextjs 框架，webpack 是自动生成的，因此我们需要看看 nextjs...，如果是数组则直接 push 进去就可以了。...(css|less|scss|sass)$/ /(?<!\.global)\.(scss|sass)$/ /\.global\.

1.5K2 0

Sass学习

说得一点都没错，现在写CSS也可以这么爽了。小伙伴们看到这里，必须大吃一惊：“我out了！” CSS预处理器，这个术语真专业……不过坑爹的术语，往往都是吓唬人的，实际并不难。...在实际开发中，如果你只是单纯地想简化CSS写法、统一风格、增强维护性的话，那么Sass和Less是一样的，学习哪一个都可以。但是如果想要用到更多并且更加强大的功能的话，那么你应该选择Sass。...在这里，我也强烈建议小伙伴们学习的是Sass，而不是Less。Sass最强大之处是配合Compass来辅助CSS开发。其中，Compass是在Sass的一个框架，保证让你爽到爆。...Sass和Less使得我们可以用“编程”的方式来书写CSS代码，这个相对于纯CSS书写方式来说，开发速度更加快，可读性和可维护性更高。我们都知道，在整站开发中，可读性和可维护性是非常讲究的。...二、Scss格式 Scss格式，是Sass的“新版本语法”。这种语法格式，使用大括号“{}”和分号“;”，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。

6885 0

webpack从零搭建开发环境

什么是 webpack 使用 webpack 作为前端构建工具代码转化:TypeScript编译成Javascript,SCSS编译成Css等文件优化:压缩JavaScript、Css、Html代码...npx (这个命令是 npm 5.2）之后出来的 npx 是默认找 node_modules 中的.bin 目录下的文件 npx webpack 两种模式:开发环境生产环境 npx webpack...新建一个基础配置 webpack.base.js webpack.base.js webpack.dev.js webpack.prod.js通过--config 指定执行的文件是哪一个。...stylus stylus-loader 如果 css 里引入了 scss 文件 rules:[ { test:/\.css$/, use:['style-loader',{...--save-dev new MiniCssExtractPlugin({ //如果是开发模式就不要用抽离样式的插件 filename:"css/main.css" }) { test:

1.2K2 0

第九十二期：css 的source map , sass 的调试和sass指令

css source maps 大多数sass项目把不同来源的文件合并到一个css文件中去。并且这个css文件通常会被压缩。...当我们从浏览器检查这个css的源文件时，我们有时候无法找到相关的css代码。这个情况我们经常遇到。解决这个问题，我们可以使用css 的source map。它可以回溯到未打包前的状态。...举个例子我们创建一个下面的文件结构我这个项目还是之前用compass生成的，不过没关系。...编译命令执行后，不仅生成了main.css，同时也生成了main.css.map 文件。main.css.map 文件包含了css选择器之间的映射关系。...但是测试驱动在css中怎么使用呢？样式风格是我们的选择之一。我们在scss文件中修改样式，使所有的用户界面符合我们的要求。

5751 0

基于Vue、ElementUI的换肤解决方案

image.png 配好以后，如果是工具就生成，如果是网页就下载。得到一个样式文件，这就是我们配置好的主题样式文件。...（你可以将这个css 文件改成你喜欢的名字，比如我改成了叫：theme-summer.css） image.png 然后在我们项目的 main.js 中，注释掉 Element-UI 的原来 css 文件引入...image.png 这个时候，项目中关于 Element-UI 的颜色，就变成了刚才我们自定义配置的颜色配色了。（下面是我自定义的一套颜色，你们觉得如何？）...）现在摆在眼前的一个需要解决的问题是：这个 css 文件加命名空间怎么加？...image.png 这种方法是快捷的，修改几个颜色变量即可生效。（然后就可以部署啦~）这里有一个问题，如何在 js 中修改这个 `element-variables.scss` 文件里面的变量？

5.1K3 0

多网站项目的 CSS 架构

这个全局层是整个多重项目（多个网站）的起始点。下面的示例图向我们演示了彼时我司的项目需求。 ?...（更多关于文件夹和文件结构的细节，参见我的上一篇文章）如何组织多个层在我们的架构中，每个层都至少包含三个文件：两个私有文件（局部样式文件和配置文件，称之为私有是因为它们不会被编译成一个 CSS 文件...这个原则会让重构非常方便。在每一层中，都要保证只编译 layer-name.scss 文件，即使某些层代表的是一个“虚拟项目”（如上面示例图中的“基础层框架”）。...我们需要根据 base-layer 文件夹的内部结构，用新项目的名称照猫画虎地克隆一套出来。在后续例子中，我们把这个新项目称为 inherited-project。...为了解决这个问题，我走了另一条路线，采用了全局模块的概念。这个概念是说，把仅用于某些层的模块放置于一个新的根目录（ _partials）中，这个新的根目录位于所有层之外。

1.6K3 0

Sass简介

说得一点都没错，现在写CSS也可以这么爽了。小伙伴们看到这里，必须大吃一惊：“我out了！” CSS预处理器，这个术语真专业……不过坑爹的术语，往往都是吓唬人的，实际并不难。...在实际开发中，如果你只是单纯地想简化CSS写法、统一风格、增强维护性的话，那么Sass和Less是一样的，学习哪一个都可以。但是如果想要用到更多并且更加强大的功能的话，那么你应该选择Sass。...在这里，我也强烈建议小伙伴们学习的是Sass，而不是Less。Sass最强大之处是配合Compass来辅助CSS开发。其中，Compass是在Sass的一个框架，保证让你爽到爆。...Sass和Less使得我们可以用“编程”的方式来书写CSS代码，这个相对于纯CSS书写方式来说，开发速度更加快，可读性和可维护性更高。我们都知道，在整站开发中，可读性和可维护性是非常讲究的。...二、Scss格式 Scss格式，是Sass的“新版本语法”。这种语法格式，使用大括号“{}”和分号“;”，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。

5523 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭