I would like to use sass in my new project, but I can't find a better way for cross file usage. Here is the example
/*a.scss*/
#mixin mixA{
....
}
.classInA{
...
}
/*b.scss*/
#import 'a'
....
I want to use the mixA without having other scss(such as classInA) being imported into b.scss, how can I do it?
One way to do it is to put all your mixins in a general mixins file, then, import that file into another general file where you import all the SCSS (or SASS) files.
/*mixins.scss*/
//Here goes all your mixins
/*main.scss*/
#import 'mixins';
#import 'header';
#import 'footer';
And import the mixins you want in the files needed.
If you want to import other sass file simply do :
#import 'path/sass-file';
#import 'path/sass-file';
#import 'path/sass-file';
If you would like extend any of already created class in your scss you can do it like this :
.new-custom-class {
#extend .custom-class;
/* you can add some options in here also */
}
Related
<div class="column">
<button class="button is-primary has-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use has-tooltip-multiline modifier to force multiline display.">Multiline Tooltip</button>
</div>
Under _sass/main.scss:
#import "../node_modules/bulma/bulma";
#import "bulma/sass/utilities/_all.sass";
#import "bulma/sass/grid/columns.sass";
#import 'bulma';
#import '~bulma-tooltip';
I added the last two lines. Don't know if they are correct.
Also any suggestions for bulma-timeline..
I have installed it but don't know where to import for its functioning. Thanks in advance
If you want to use Bulma extensions, you can install the extension like that :
npm install bulma-tooltip
Then in the scss file where you import bulma you need to import the extension after the importation of Bulma.
For exemple, if your path to bulma is
#import "../node_modules/bulma/bulma.saas";
the bulma-tooltip package should be imported as below :
// Import the complete extension
#import '../node_modules/bulma-tooltip/src/sass/index.sass';
OR
// Import only what you need from the extension
#import '../node_modules/bulma-tooltip/src/sass/_animation.sass';
#import '../node_modules/bulma-tooltip/src/sass/_responsiveness.sass';
So the order in your scss file should be:
1) Customizing sass variables
2) Importing Bulma
3) Importing Bulma extensions
The order should be like below, you won't need to import full module
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
#import "../node_modules/bulma/sass/utilities/_all.sass";
#import "../node_modules/bulma/sass/base/_all.sass";
#import "../node_modules/bulma/sass/elements/button.sass";
#import "../node_modules/bulma/sass/elements/container.sass";
#import "../node_modules/bulma/sass/elements/title.sass";
#import "../node_modules/bulma/sass/form/_all.sass";
#import "../node_modules/bulma/sass/components/navbar.sass";
#import "../node_modules/bulma/sass/layout/hero.sass";
#import "../node_modules/bulma/sass/layout/section.sass";
I have a style library with the general styling for my project. This library is packed into one library.css file. In this library, I have a class a.
In one of my scss stylesheets I'd like to extend this calss a from library.css:
#import 'library.css';
.b {
#extend .a
}
When I do this, I'm told that class a was not found in library.css.
Is there any way to extend a class from a CSS stylesheet?
When you add an #import at-rule to your Sass code, you need to be careful what you wish to achieve. #import is actually valid CSS, so Sass needs to evaluate and figure out your intentions here. Sass extends the CSS #import rule and does not recreate it. According to the documentation:
#import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS #import rule:
If the file's extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
As a result, if you put the .css extension after the filename in an #import at-rule, Sass will just output this line of valid CSS code. You can test this by removing your #extend directive, which will make your code compile. You will see that the entire output file is this:
#import 'library.css';
Sass is not going to follow that CSS file and make it's contents available to the #extend directive.
What you could do is remove the file extension from your #import at-rule.
#import 'library';
.b {
#extend .a
}
However, this will actually output the entire contents of the file library.css into your CSS file that this Sass file compiles to, which I am assuming is not your goal.
To fix that, you could create a partial Sass file that contains placeholder selectors.
%a {
color: red;
}
The good thing about placeholder selectors is that they have no output of their own. According to the documentation:
On their own, without any use of #extend, rulesets that use placeholder selectors will not be rendered to CSS.
Their importance and usefulness is detailed on this page.
Import the partial Sass file in your Sass stylesheet and use the #extend directive like this:
.b {
#extend %a;
}
And to make sure your library.css file is consistent, convert it into Sass, import the same partial file on top of it containing your placeholder selectors and simply use the #extend directive inside .a selector as well.
#import 'placeholders';
.a {
#extend %a;
}
I have a main.css:
#import '~bootstrap/less/bootstrap.less';
#import url('./base.css');
#import url('./components/navbar.css');
I want to override bootstrap's default body background-color, so I have
body {
background-color: #efefef;
}
inside base.css,
but that does not override bootstrap's property. If I import ~bootstrap/dist/css/bootstrap.min.css instead of ~bootstrap/less/bootstrap.less, I am able to see my changes, but not with less file. How can I achieve that?
That's because you cannot import a .less file in a .css file. it has to be converted first.
If you want to import the .less file, you'd have to have a main.less and convert that to .css
You can use GRUNTJS for that.
I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).
The solution I've thought so far is to apply a class to the vaadin compiled css, like:
.daVaadinTheme {
#import bootstrap.css;
}
so the content will be compiled like:
.daVaadinTheme h1.insideTheFile{
}
.daVaadinTheme h2.insideTheFile{
}
But, as you may figured out, is not obviously working.
Do you have any solution?
Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...
SOLUTION: (kudos to Mathias Jørgensen)
using #import from another scss file:
in test.scss:
.daVaadinTheme{
#import "bootstrap.scss";
}
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'foo';
}
Reasons:
import only works with scss
underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
You need move your code into mixin:
// botstrap.scss
#mixin bootstrap {
h1.insideTheFile{
}
h2.insideTheFile{
}
}
Then, you can import normal:
// test.scss
#import "bootstrap"; // No extension
#include bootstrap; // The name of "mixin"
or with context:
// test.scss
#import "bootstrap"; // No extension
.daVaadinTheme {
#include bootstrap; // The name of "mixin"
}
If you want to add certain styles to a class using sass/scss I think what you're looking for is
.myClass { #import bootstrap.css; }
I would like to keep one central .scss file that stores all SASS variable definitions for a project.
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
The project will have a large number of CSS files, due to its nature. It is important that I declare all project-wide style variables in one location.
Is there a way to do this in SCSS?
You can do it like this:
I have a folder named utilities and inside that I have a file named _variables.scss
in that file i declare variables like so:
$black: #000;
$white: #fff;
then I have the style.scss file in which i import all of my other scss files like this:
// Utilities
#import "utilities/variables";
// Base Rules
#import "base/normalize";
#import "base/global";
then, within any of the files I have imported, I should be able to access the variables I have declared.
Just make sure you import the variable file before any of the others you would like to use it in.
This question was asked a long time ago so I thought I'd post an updated answer.
You should now avoid using #import. Taken from the docs:
Sass will gradually phase it out over the next few years, and
eventually remove it from the language entirely. Prefer the #use rule
instead.
A full list of reasons can be found here
You should now use #use as shown below:
_variables.scss
$text-colour: #262626;
_otherFile.scss
#use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension
body {
// namespace.$variable-name
// namespace is just the last component of its URL without a file extension
color: variables.$text-colour;
}
You can also create an alias for the namespace:
_otherFile.scss
#use 'variables' as v;
body {
// alias.$variable-name
color: v.$text-colour;
}
EDIT As pointed out by #und3rdg at the time of writing (November 2020) #use is currently only available for Dart Sass and not LibSass (now deprecated) or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility
This answer shows how I ended up using this and the additional pitfalls I hit.
I made a master SCSS file. This file must have an underscore at the beginning for it to be imported:
// assets/_master.scss
$accent: #6D87A7;
$error: #811702;
Then, in the header of all of my other .SCSS files, I import the master:
// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
#import "assets/master";
// Then do the rest of my CSS afterwards:
.text { color: $accent; }
IMPORTANT
Do not include anything but variables, function declarations and other SASS features in your _master.scss file. If you include actual CSS, it will duplicate this CSS across every file you import the master into.
In angular v10 I did something like this, first created a master.scss file and included the following variables:
master.scss file:
$theme: blue;
$button_color: red;
$label_color: gray;
Then I imported the master.scss file in my style.scss at the top:
style.scss file:
#use './master' as m;
Make sure you import the master.scss at the top.
m is an alias for the namespace;
Use #use instead of #import according to the official docs below:
https://sass-lang.com/documentation/at-rules/import
Then in your styles.scss file you can use any variable which is defined in master.scss like below:
someClass {
backgroud-color: m.$theme;
color: m.$button_color;
}
Hope it 'll help...
Happy Coding :)
Create an index.scss and there you can import all file structure you have. I will paste you my index from an enterprise project, maybe it will help other how to structure files in css:
#import 'base/_reset';
#import 'helpers/_variables';
#import 'helpers/_mixins';
#import 'helpers/_functions';
#import 'helpers/_helpers';
#import 'helpers/_placeholders';
#import 'base/_typography';
#import 'pages/_versions';
#import 'pages/_recording';
#import 'pages/_lists';
#import 'pages/_global';
#import 'forms/_buttons';
#import 'forms/_inputs';
#import 'forms/_validators';
#import 'forms/_fieldsets';
#import 'sections/_header';
#import 'sections/_navigation';
#import 'sections/_sidebar-a';
#import 'sections/_sidebar-b';
#import 'sections/_footer';
#import 'vendors/_ui-grid';
#import 'components/_modals';
#import 'components/_tooltip';
#import 'components/_tables';
#import 'components/_datepickers';
And you can watch them with gulp/grunt/webpack etc, like:
gulpfile.js
// SASS Task
var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', function(){
return gulp
.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(concat('styles.css'))
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./build/css/'));
});
gulp.task('watch', function () {
gulp.watch('sass/**/*.scss', ['styles']);
});
gulp.task('default', ['watch']);
As previously mentioned, the use of #import is discouraged in newer versions of SASS. Use #use "path to SASS partial file" at the top of your file instead.*
You need to import (using #use) the partial SASS file into each SASS file that uses it - not just your main one.
Let's say we have a SASS file called _variables.scss* in a folder called partials that we want to use in header.scss. So in header.scss you write:
#use "partials/variables" as *
Now you can use all the variables defined in _variables.scss* with $variable (no prefix). Alternatively, you can use a namespace (like Christian already mentioned)
#use "partials/variables" as v
to refer to the variables inside _variables.scss* with v.$variable.
* Note that the SASS compiler ignores underscores so that there isn't a separate CSS file generated for each partial SASS file. Instead you can just import them all into your main SASS file with #use.
How about writing some color-based class in a global sass file, thus we don't need to care where variables are. Just like the following:
// base.scss
#import "./_variables.scss";
.background-color{
background: $bg-color;
}
and then, we can use the background-color class in any file.
My point is that I don't need to import variable.scss in any file, just use it.
I found a solution for vue3 using vite. If you are using dart-sass, you can get around the global limitation of sass modules by using #forward and #use.
_master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc...
_global.scss
#forward '_master.scss';
// etc...
Then under the vite.config.js configure your css options as
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `
#use "./<path-to-file>/_globals.scss" as *;
`,
},
},
},
// etc...
});
As mentioned in the sass docs when importing modules without a namespace
We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!
You can then use other #use modules in any other stylesheets or components as following
// component file needing a function module
#use 'functions.scss';