I am migrating from libsass to dartscss, so moving from #import to #use. I have around 20 sites and the way I have my sites is to have one scss folder with all of my scss files and then have a site config per site that uses variables to override the default colours.
My site structure
scss/
├─ import.scss
├─ base/
│ ├─ _reset.scss
site1/
├─ scss/
│ ├─ settigns/
│ │ ├─ _config.scss
│ import.scss
In site1/scss/settings/_config.scss I have the following code:
$bgc: red;
And in my site1/scss/import.scss I have:
#use "settings/config" as *;
#use "../../scss/import.scss";
And finally in ../../scss/import.scss I have a simple test call to see if it works.
body {
background-color: $bgc;
}
When I view my site I get undefined variable and $bgc doesn't render. I would like to keep the structure I had before since I have many sites that share the same scss folder and all worked fine before when I used #import.
Related
I want to give my routes a prefix based on the folder in which they're in. For example, with this folder structure:
controllers/
├─ v1/
│ ├─ Controller.kt
├─ v2/
│ ├─ Controller.kt
I would like to get the following routes:
{host}/v1/{route}
{host}/v2/{route}
Currently, I need to set the 'prefix' on every controller separately:
#RestController
#RequestMapping("/v2/route")
Is there any way to achieve this in Spring with either custom annotations that allow a prefix (#RestControllerV1("/route")), or with some setting that just prefixes all files within a specific folder?
I am working on a project that consists of multiple web portals based on a different target audience. The portals share the same HTML "components" and differ mostly in color, but additional style difference may exist.
Until now, I've used the following folder structure:
sass
├── default
│ ├── components
│ │ └── component-1.scss
│ └───_variables.scss
├── portal-a
│ ├── components
│ │ └── component-1.scss (portal-a specific code)
│ ├── _variables.scss
│ └── app.scss
└── portal-b
├── _variables.scss
└── app.scss
default contains the default styles for all components as well as global variables.
portal-* contains additional portal-specific styling for a component (if any) as well as portal-specific variables like colors, fonts, spacing, etc.
Each portal-* also contains an app.scss that serves as entry point and it's what the final CSS is built from. It contains the following:
#import "../default/_variables";
#import "./_variables";
#import "../default/components/**/*.scss";
#import "./components/**/*.scss";
So basically it includes the default variables first, then the portal-specific variables overwriting the default values, then all scss files from default and finally the portal-specific component stylesheets.
This whole setup works, but I would like to switch to SASS' new component model with #use and #forward, but I am totally lost.
So let's say I have my sass/default/_variables.scss:
$font-size: 16px !default;
$text-color: #000000 !default;
$padding-base: 25px !default;
Then I have sass/portal-a/_variables.scss where I only want to redefine the text color:
$text-color: #ff0000;
I assume I also have to forward the default variables, so sass/portal-a/_variables.scss should eventually contain:
#forward "../default/_variables";
$text-color: #ff0000;
Right? (Please correct me if I am wrong.)
Same deal for portal-b, but with a different value, sass/portal-b/_variables.scss:
#forward "../default/_variables";
$text-color: #0000ff;
So now that I have variables set-up, I want to write the default stylesheet of a component. I create a file sass/default/components/component-1.scss.
[data-component="component-1"] {
font-size: how do I access the font-size variable?;
color: how do I access the text-color variable?;
padding: 2 * how do I access the padding-base variable?;
}
Then I create my entry points from which the final CSS files are going to be built.
sass/portal-a/app.scss and sass/portal-b/app.scss:
#use "_variables"
#use "../default/components/component-1";
That first #use "_variables" should theoretically load the default variables, overwrite the default value for the text color, but then how do I pass everything so component-1.scss can access it?
I've installed foundation 6 through foundation cli, and chose zurb-template. Everything is working ok when I run
foundation watch
From this moment, any file I change in src folder produces the reloading of the browser.
The problem arises when I change anything in my own _settings.scss.
The error message I get is:
Error in plugin 'sass'
Message:
src\assets\scss\app.scss
Error: File to import not found or unreadable: settings
Parent style sheet:
D:/wamp64/www/investoo_frontend2/src/assets/scss/app.scss
on line 3 of src/assets/scss/app.scss
>> #import 'settings';
^
My folder structure is:
my-project
├─ dist
├─ node-modules
├─ foundation-sites
├─ jquery
├─ what-input
├─ ...
├─ src
├─ assets
├─ js
├─ scss
├─ _settings.scss
├─ app.scss
In app.scss I am importing everything I need:
#charset 'utf-8';
#import 'settings';
#import 'foundation';
#import 'motion-ui';
#include foundation-global-styles;
#include foundation-grid;
In config.yml I am using the right pahts:
PATHS:
...
# Paths to Sass libraries, which can then be loaded with #import
sass:
- "src/assets/scss"
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
Any help?
Thanks a lot.
Have you tried to put #import 'settings' after #import 'foundation'?, actually as the last import on the list?
I'd like to change variables in materialize _variables.scss e.g.
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/
In my Vue 2 main.js I include materialize style like this
require('materialize-css/sass/materialize.scss');
Because of !default I guess I need to include my _variables.scss before including materialize, but I don't know how.
So what's the proper way to set my own variables e.g. $primary-color: color("blue", "lighten-2") (I want to use predefined palette from materialize _colors.scss)?
EDIT 1: I installed vue2 with vue-cli
EDIT 2:
Folder structure:
├── build/
├── config/
├── dist/
├── node_modules/
│ ├── materialize-css
├── src/
│ ├── components
│ ├── router
│ └── main.js
├── package.json
└── index.html
Before changing any default settings in materialized css; first, you need to import the component for which you want to change the settings for. After this you can override the default settings and then you should import materialize. For example if you want to change default color then create a file for example app.scss then write following code:
//please put the paths as per yours project directory structure
#import "materialize-css/sass/components/color";
$primary-color: color("blue", "lighten-2") !default;
#import 'materialize-css/sass/materialize'
Note: app.css must be included in your page. As per my example app.css must be in your project root folder i.e. at same level as that of index.html
Now you can load app.scss or app.css in Vue 2 as
require('../app.scss');
Visit official materialized github repo for viewing complete source.
In matrialize 1.0.0 however,
follow these guildlines to override materialize colors:
Define the value for the variable that you want to override (eg. $primary-color)
Import the materialize.scss library
The definition of the override values must occur before importing the materialize.scss, that means that you can not use the matrial functions such as color()
Example:
// main.scss - the order of the imports is important !!!
#import './_colors';
#import 'materialize-css/sass/materialize.scss';
// _colors.scss
$primary-color: #03a9f4; //light-blue
I have this:
Project
├───public_html/
│ ├───css/
│ | └───style.css
│ |
│ ├───img/
│ |
│ ├───js/
│ |
│ └───index.html
|
├───scss/
│ ├───ie.scss
│ ├───print.scss
| └───style.scss
|
└───config.rb
config.rb
http_path = "/"
css_dir = "public_html/css"
sass_dir = "scss"
output_style = :compressed
and I'm doing:
compass watch "scss/style.css"
Its creating (overriding) the style.css as expected. (so far so good).
But when I edit the style.scss and save it its compiling inside the scss folder with this:
...
├───scss/
| ├───.sass-cache/
| ├───ie.css
| ├───ie.scss
| ├───print.css
| ├───print.scss
│ ├───screen.css
│ ├───screen.scss
│ └───config.rb
...
like ignoring the first config.rb and moving the root inside the scss folder.
In addition I just want screen.scss compiled, the rest will be included.
Any ideas? Thanks
As a solution I've ended up compiling the files directly from the scss forlder and I now have there the main config.rb
I still would like to have control about where the config.rb is and the subfolders that are getting filled in the compilation process.
If anyone has a way to better control this, please let me know.
The other thing: "to compile just a few of the scss files"
The way to do this is to rename the files you don't want to be compiled starting with underscore
_print.scss (instead of print.scss). The good thing is that you can still import the files as you normally would, without the underscore (even if the actual file has the starting underscore)
#import "print.scss"