I have just found SCSS and am thinking it would be useful on a site I am currently developing (I'm about 50% done) and that it would be a good way to make some of my existing CSS tidier and easier to read.
My question is can I rewrite parts of my existing CSS as SCSS and leave the rest as CSS? Can I have both CSS and SCSS in the same stylesheet or does it have to be all SCSS or CSS?
SCSS is a pre-processor of CSS, so yes you can mix, as long you use the files ending in .scss
Although I advise you to read the SASS Docs and use it in a proper way.
see this below and the SASS demo:
SCSS
.test {
div {
color:red;
}
}
div span {
background:blue;
}
CSS
.test div {
color: red;
}
div span {
background: blue;
}
yes, that's perfectly fine, no problem.
Related
The following is meant to toggle stylesheets:
body.light {
background: var(--bg);
color: var(--text);
& a {
color: var(--link_color);
}
}
body.dark {
color: var(--bg);
background: var(--text);
& a {
color: white;
}
}
This snippet is in the last loaded file, amongst a few CSS files.
Problem: while the attributes are executed properly, the nesting for the selectors is not being picked up (It was expected the ampersand was the proper way to go).
There is a framework CSS file (loaded before the file where this code is placed) and it is those attributes that are executed.
What are the syntactic requirements to run properly nested selectors (be they native tag selectors (such as `a) or user-defined selectors?
update
The theme is being generated via a cookies[:theme]
and the body tag adopts it this way:
<body class="<%= cookies[:theme] %>">
To make it work in regular CSS, rewrite without use of &.
Exmaple:
body.light {
background: var(--bg);
color: var(--text);
}
body.light a {
color: var(--link_color);
}
body.dark {
color: var(--bg);
background: var(--text);
}
body.dark a {
color: white;
}
Regarding the ampersand, according to Sass document:
The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
Currently, usage of & will require a css preprocessor like Sass, and also the & is widely adopted by many syntax such as Sass, SCSS, Less.
CSS nesting is not possible with standard CSS but only with CSS preprocessors like Sass and Less.
Caniuse.com says
CSS nesting provides the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. Similar behavior previously required a CSS pre-processor.
but the page does not shows any supported browser.
There are some more information on developer.chrome.com. The examples use the > character.
This is because, you used Sass in your project. Sass is a preprocessor scripting language that compiled into CSS. Sass reduces repetition of CSS and therefore saves time.
Let say you have this kind of HTML.
<div class="parent">
parent
<div class="child">
child
<div class="container desc">container</div>
</div>
</div>
assume you need these requirements, you need to make container class to add background to green. and desc class to width 500px.
you can do this by,
.parent {
.container {
background: green;
&.desc {
width: 500px;
}
}
}
One Note, In order to use Sass, you have to enable it from your project.If you use Angular,Vue or React, use
npm i sass
I hope this make sense to you.
Is there a way to have a class or any selector with specific styles, and then share, import or assign those styles to a another selector. This is to avid creating multiple classes and not having to go back to the HTML code all the time to assign such classes.
For example:
.orangeText{
color:orange
}
.strongtext{
font-weight:900
}
a regular scenario would use those clases like this:
<div class="orangeText strongtext">My orange Strong Text</div>
I am looking for something like this:
.orangeText{
color:orange
}
.strongtext{
font-weight:900
}
.orangeStrongTitle{
#.orangeText; /* Import styles from .orangeText*/
#.strongtext; /* Import styles from .strongtext*/
text-decoration:underline;
}
ON HTML:
<div class="orangeStrongTitle">My orange Strong Text</div>
PLEASE NOTE THAT #.orangeText IS MY INVENTION TO GIVE AN EXAMPLE OF WHAT I WANT, I DON'T KNOW IF SUCH THING EXISTS, I WAS INSPIRED ON #import
Is this possible?
With traditional CSS it seem's that you can't.
See this topic : Is it possible to combine classes in CSS?
Unless you use LESS or SASS's 'mixin' features, there's no real way in
plain CSS to "inherit" other classes. The best you can do is apply
all three classes to your DOM element. If your problem is that you
have a ton of those classes already on a page and you want to add
properties to all of them, you can do:
.foo, .bar, .foobar {
color: red;
}
and that will apply color: red to any element that has .foo or .bar or
.foobar.
EDIT
Since you're asking for an exemple, here is how the mixin feature of SASS works :
#mixin mixin-name {
margin: 0;
padding: 0;
}
ul {
#include mixin-name;
}
Having this will compile into this :
ul {
margin: 0;
padding: 0;
}
I'd like to take some legacy CSS files and convert them to SCSS with nested styles. For example:
Input
#SomeElement .button { /*Some styles*/ }
#SomeElement .link { /*Some styles*/ }
Output
#SomeElement {
.button { /*Some styles*/ }
.link { /*Some styles*/ }
}
Is there any tool to make this project manageable with thousands of lines of CSS to convert? I understand there may be some edge cases that need manual fixing, but it would be great to be able to jump start the process with some sort of automatic conversion.
Would PostCSS or Gulp have any tools I could leverage?
Thanks for reading.
By using this you can change your css to scss
http://css2sass.herokuapp.com/
Using Gulp
https://www.npmjs.com/package/gulp-css-scss
I am reading a Responsive website book, where I see the styles definition like
.main-navigation
{
li {position: relative;}
.children
{
left: -999em;
position:absolute;
}
}
I have also tried in my css file, but seems not to be working.
Now my question :) Can we define css style in this way?
This is not proper CSS. But you can use this with a CSS preprocessor like less.
Quote from the website:
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
This works with SASS/SCSS, too.
Can I do something like the following?
.class1{some stuff}
.class2{class1;some more stuff}
Update 1: There is a CSS3 spec for CSS level 3 nesting. It's currently a draft.
https://tabatkins.github.io/specs/css-nesting/
Update 2 (2019): We now have a CSSWG editors draft
https://drafts.csswg.org/css-nesting-1/
Update 3 (2022): We now have a W3C First Public Working Draft https://www.w3.org/TR/css-nesting-1/
If approved, the syntax would look like this:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
#nest & > .bar {
color: blue;
}
}
.foo {
color: red;
#nest .parent & {
color: blue;
}
}
Not possible with vanilla CSS. However you can use something like:
Sass
Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.
Or
Less
Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.
Example:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Not with pure CSS. The closest equivalent is this:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
Not directly. But you can use extensions such as LESS to help you achieve the same.
No.
You can use grouping selectors and/or multiple classes on a single element, or you can use a template language and process it with software to write your CSS.
See also my article on CSS inheritance.
I do not believe this is possible. You could add class1 to all elements which also have class2. If this is not practical to do manually, you could do it automatically with JavaScript (fairly easy to do with jQuery).
If you cannot wait until native CSS nesting goes official, you can use Container Queries to do it. As of now, it is supported (partially) by Chrome & Edge 105+, as well as Safari 16+.
It will looks like this:
.class1 {
container-type: inline-size;
container-name: my-container;
// other style rules
}
#container my-container (min-width: 0px) {
.class2 {
// some style rules
}
}
More details can be found at here.
Try this...
Give the element an ID, and also a class Name. Then you can nest the #IDName.className in your CSS.
Here's a better explanation
https://css-tricks.com/multiple-class-id-selectors/