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
Related
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 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.
I'm using stylus with bootstrap-stylus. This is my app.styl code
#import "../../node_modules/bootstrap-stylus/lib/bootstrap.styl";
section
#extend .row
After i run gulp, I notice that complete bootstrap css is included to the target app.css. I want to dynamically include just the .row rule using #extend. what I'm trying to get is this..
section { //.row rules
zoom: 1;
margin-left: -20px;
}
Is it possible? What am I missing? Is it possible with SASS?
AFAIK both stylus and sass do not support importing only certain selectors of a file. If you have control over the imported file, though, you could use SASS placeholder selectors instead of classes/ids. A placeholder selector is some sort of abstract selector which simply doesn't render anything by default.
/* _partial.scss */
%some-selector {
prop: value;
}
%another-selector {
prop: value;
}
/* main.scss */
#import 'partial';
.some-class {
#extend %some-selector;
}
results in the not-extended placeholder selectors being ignored (in this case %another-selector)
/* output.css */
.some-class {
prop: value;
}
I've got some CSS that is much bulkier than it seems to need to be and I'd like to know if there is a way to condense it down by writing selectors that will pick from multiple identifiers.
Here is an example:
.scrollbar.horizontal:hover .button
{
}
.scrollbar.horizontal:active .button
{
}
That I'd like to condense to something like:
.scrollbar.horizontal:(active|hover) .button
{
}
Is there a syntax that would allow this?
Unless you find that joining the selectors together is a solution, no, not really:
.scrollbar.horizontal:hover .button,
.scrollbar.horizontal:active .button {
}
Using a CSS preprocessor like LESS or SASS can clean it up:
.scrollbar.horizontal {
&:hover, &:active {
.button {
...
}
}
}
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/