Don't create print.scss and screen.scss sass files when installing compass
By : Ivan.mail.list Ivan.
Date : March 29 2020, 07:55 AM
Hope this helps The command line option you're looking for is --bare, though it only works with the create option: code :
compass create [optional directory name] --bare
|
Bootstrap, scss, use some class name in scss code instead of writing it in html files
By : Santhakumar
Date : March 29 2020, 07:55 AM
seems to work fine U can create placeholder classes in scss, Placeholder classe names start with %.They, themselves, will not be included in the the output css files. code :
/*In bootstrap file*/
.text-truncate{
text-overflow:ellipsis;
...
...
}
/*In your scss file*/
%truncatedtext { /*This is placeholder class*/
@extend .text-truncate; /*This will include/pull the actual bootstrap code*/
}
.class-a {
@extend %truncatedtext;
color: #000000;
}
.class-b {
@extend %truncatedtext;
color: red;
}
.text-truncate, .class-a, .class-b {
/*trucate css code*/
}
.class-a {
color: #000000;
}
.class-b {
color: red;
}
|
Import SCSS file with font url into different scss files with different folders level
By : Sasha
Date : March 29 2020, 07:55 AM
this will help Font url makes no sense for Sass, it is only resolved by browser when font is being loaded. So the only requirement for you is to have correct url for font relative to CSS, not SCSS. You can, for example, use absolute url (starting from /) if it is acceptable solution.
|
Naming imported scss files .scss or .css.scss
By : Gonçalo Silva Pereir
Date : March 29 2020, 07:55 AM
like below fixes the issue Honestly, I don't think it matters much. As a convention, I generally name files that will eventually be output as an actual CSS file as .css.scss and imported files as .scss. I do the same for .html.haml and .haml for partials.
|
ReactJS - including other scss files in main.scss
By : dawit
Date : March 29 2020, 07:55 AM
With these it helps You should import your .scss file via javascript in your top level React component. import './styles/main.scss';
|