I'm using SASS, writing in style.scss compiling to (style.css & style.map.css), but how to convert style.css file to completely normal style.css file?
The compiled style.css file looks like this
div{
margin: 0 auto;}
p {
text-align: center;}
How to convert it into normal.css?
The default output style for Sass is normally nested, which is the style/formatting you see in your style.css file.
Possible options are:
nested
expanded
compressed
compact
If you change the output to expanded before compiling your file, you will probably get the style you want.
sass --watch scss:css --style expanded
Will produce this:
div {
margin: 0 auto;
}
p {
text-align: center;
}
PS. If you are using somtehing like Gulp, the task could be set up like this:
.pipe(sass({ outputStyle: 'expanded' }))
Related
I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with.
I would like to render SCSS like this
// myMixin.scss
#mixin myMixin {
.myMixin {
padding: 1rem;
background: yellow;
}
}
// main.scss
#import 'myMixin.scss';
$blue: #004AAD;
.button {
.text {
color: $blue;
}
#include myMixin;
}
And the output would look like this:
.button {
.text {
color: #004AAD;
}
.myMixin {
padding: 1rem;
background: yellow;
}
}
Basically, I'd like a way to render everything in SCSS while keeping the original nesting. Is it possible? Thanks.
Nesting is specific to SCSS. Also I don't think #import is best practice, use #use instead.
https://sass-lang.com/documentation/at-rules/use
Here is the thing our client(browsers) only support raw CSS and not SCSS, When you use SCSS it compiles down to raw CSS, And CSS doesn't have inbuilt Nesting feature.
I have some funky formatting which I am using to override a Polymer component. It's the custom variables mixin. Scss does not like it to compile with. Is it possible to set a chunk that doesn't get compiled the sass way? Similar to jekyll raw html tag.
For example
// tag do not compile with sass //
--my-component-custom-mixin: {
background-color: #000;
color: #fff;
};
// tag finish do not compile with sass //
You could use Sass string interpolation (#{'...'}) to escape the CSS mixin:
SELECTOR {
--CSS-VARIABLE-NAME: #{'CSS-VARIABLE-VALUE'};
}
Example:
my-view1 {
--my-component-custom-mixin: #{'{
background-color: #000;
color: #fff;
}'};
}
demo
How can I Include .scss file in another .scss file?
I was trying to write this in a file:
app.scss:
#include('buttons');
#include('dropzone');
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
} /* more css code here */
and it returns an error : invalid css after #import
I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?
You can import it like this;
#import "../../_variables";
#import "../_mixins";
#import "_main";
#import "_login";
#import "_exception";
#import "_utils";
#import "_dashboard";
#import "_landing";
According to your directories and it will do what you want.
You can include a partial by doing this:
#import "partial";
The imported file needs an underscore, so sass will recognize it to be included: _partial.scss
You can use #use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
see how to using #use 'base'; in the styles.scss file
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
you don't need to include the file extension.
#osherdo You have no need to add !important for overwriting bootstrap CSS.
body
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}
First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.
Ok, so it appears to be that my app.scss file collide with Bootstrap.css file.
Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:
body
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}
Also, gulpfile.js has been updated to suite my needs accordingly:
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
.styles([
'app.css'
], 'public/css/app.css');
mix.version([
'css/app.css'
]);
});
And that's how I fixed it.
Dove into SASS this morning for the first time, and I am impressed with the potential...but I am having a slight issue.
(Using Gumby Responsive framework)
So far, I can't seem to get the _custom.scss to compile with everything else.
// Your custom SCSS should be written here...
$color: #0066a6;
body{
background: $color;
}
I added the above to the _custom.scss, went to the command prompt, typed "compass compile" and it returned "unchanged sass/gumby.scss"
I also tried "compass compile sass/_custom.scss" and all that did was create a "custom.css" that (of course) was not showing up either.
What am I doing wrong?
By using the _ at the beginning of your stylesheet name, your using a sass partial. That tells sass to not create standalone stylesheet for _custom.scss at compile time.
Remove the partial to make sass create the sheet: ie. rename it to custom.scss
or keep the partial and import it into your main stylesheet with:
#import "custom";
Example, two sheets _reset.scss and base.scss:
/* _reset.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/* base.scss */
#import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
Here _reset.scss wont be compiled into its own standalone sheet ( because of the partial), but will be included in the base.scss sheet right before the body declartion ( because base.scss isnt a partial). The output would look like this:
/* base.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
Make sure your compass configuration is setup correctly. First initiate your project with:
compass create path/to/project --sass-dir=[your_sass_dir]
Then you'll have a config file called config.rb. It should look something like this:
# Location of the theme's resources.
css_dir = "css"
sass_dir = "sass"
fonts_dir = "css/fonts"
extensions_dir = "sass-extensions"
images_dir = "images"
javascripts_dir = "js"
Solution Found
Was the weirdest thing...opened the "gumby.css" (was a last ditch, "i'm getting super peeved" moment) hit select all -> delete -> save -> close
Then headed back to the command prompt, did the 'compass compile' command, and somehow voila...apparently I just needed to delete everything in the original gumby.css before continuing, because then it recreated the css file with the #import partials working.
I just started with sass and installed prepros. I tried to compile an .scss file and got an error:
Syntax error: Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "#blue;"
The .scss code:
.footer {
clear: both;
background-color: #blue;
}
I installed Ruby, and prepros.
SCSS uses $ to denote variables so it should be background-color: $blue;
It looks like your syntax is wrong. In Sass, # is for things like imports, media directives, partials (includes) and extends.
If you want to define a specific value for blue, and then reuse it, then the syntax is something like this:
$blue: #3333FF;
a {
font-weight: bold;
color: $blue;
}