i want to get session storage in to my scss file
in here have my scss file and component.ts file
<<---- component.ts file ---->>
this.BarWidth = sessionStorage.getItem('BarWidth');
this.BarHeight = sessionStorage.getItem('BarHeight');
<<--- Scss file --->>
$BarWidth = sessionStorage.getItem("BarWidth");
$BarHeight = sessionStorage.getItem("BarHeight");
.barcode_6_style {
max-width: $BarWidth;
min-width: $BarWidth;
max-height: $BarHeight;
min-height: $BarHeight;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}`
I wanted the same feature a while back but realized this is already supported by webpack. My solution looks like this:
var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
module: {
loaders:[
{test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
]
},
}
Related
I'm migrating my project from create-react-app to Vite.
Among my styles there is a following fragment:
// Button.module.scss
.btn {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&:hover {
--btn-bg-color: gray;
border-color: white;
}
}
}
And in other module:
.label {
composes: btn from 'src/Button.module.scss'
}
This used to build fine with webpack.
With Vite, in css bundle I get this:
._btn_x66zc_1 {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&
:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&
:hover {
--btn-bg-color: gray;
border-color: #fff
}
}
}
and, respectively, CLI warnings:
warnings when minifying css:
▲ [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-#nest]
<stdin>:309:2:
309 │ &:not(:disabled) {
╵ ^
Apparently, a module linked with composes prop isn't get pre-processed.
I tried to add a postcss-nested plugin – in a hope nesting syntax can be handled both at pre- and post-processing stages:
// vite.config.ts
{
css: {
postcss: { plugins: [ postcssNested() ] }
}
}
but this did nothing.
The questions are:
Is it possible to make it work as it used to?
Is the error I'm getting now an expected behaviour? (and thus, did react-app use some specific tricks to make this non-conventional usage possible?)
Getting Parse error identifier expected when running storybook in svelte project
Tried installing #storybook/preset-scss, sass-loader, node-sass but still getting error like
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Identifier is expected (204:4)
202: position: relative;
203:
204: .error-panel {
^
205: position: absolute;
206: bottom: 100%;
You need to install svelte-preprocess to use Sass inside a Svelte component. Install the package and add preprocess to the svelte-loader options.
// webpack.config.js
// other imports
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
// other properties
module: {
rules: [
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
// other svelte-loader options
preprocess: sveltePreprocess() // this will process sass inside a component
}
}
},
// other loaders
]
},
// etc
};
You can then write Sass inside a component like so (note the lang="scss" attribute on the style tag).
<main>
<h1>Hello world!</h1>
</main>
<style lang="scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
h1 {
color: green;
}
}
</style>
Update based on "#storybook/svelte": "^6.5.12",
The .storybook/main.cjs should look like so
const {
typescript: preprocessTs,
scss: preprocessScss
} = require('svelte-preprocess');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx|svelte)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
"#storybook/addon-svelte-csf",
"#storybook/preset-scss"
],
"framework": "#storybook/svelte",
"core": {
"builder": "#storybook/builder-vite"
},
"svelteOptions": {
"preprocess": [
preprocessTs(), // sveltekit-storybook typescript support
preprocessScss() // sveltekit-storybook sass support
]
},
"features": {
"storyStoreV7": true
}
}
You can then write Sass inside a component like so (note the lang="scss" attribute on the style tag).
<main>
<h1>Hello world!</h1>
</main>
<style lang="scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
h1 {
color: green;
}
}
</style>
I'm using Sass for styles. When i try to compile this part of code:
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
#extend .heart:before;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
I got this message:
#extend .heart:before;
Error: compound selectors may longer be extended.
Consider `#extend .heart, :before` instead.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extending_compound_selectors for details.
#extend .heart:before;
It doesn't compile with terminal, but it's compile and works as expected with Prepros application. Any ideas why it doesn't work when i try to compile with sass command?
I used this example: https://codepen.io/souporserious/pen/yEntv
I think you need to create a placeholder like this; Also I know that there are some bugs in command line compiling with #extand and pseudo-elements around 2016.
%placeholder {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
#extend %placeholder;
}
&:after {
#extend %placeholder;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
for angular 8
npm install node-sass --save-dev
should be tried; also remove sass with
npm remove sass
and comfigure to use node-sass only in your webpack.prod.js
const sass = require('node-sass');
...
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', {
loader: 'sass-loader',
options: { implementation: sass }
}],
exclude: /(vendor\.scss|global\.scss)/
},
just adding node-sass as it is described in some github issues answers didn't help me, I was forced to remove sass and point explicitly to node-sass implementation
I'm trying to work out on SCSS how I would go about something like this:
I would like to have a margin anywhere between 1px and 1000px and have a class for it.
For example
.MarginTop-x
X being where I can write any value. Obviously I couldn't write out
.MarginTop-1 {margin-top:1px}
.MarginTop-2 {margin-top:2px}
.MarginTop-3 {margin-top:3px}
.MarginTop-4 {margin-top:4px}
etc...
Well you need a #for loop to do that .
SCSS :
$class-slug: ".MarginTop";
$stop-loop: 4;
#for $i from 0 through $stop-loop {
#{$class-slug}-#{$i} {
margin-top: #{$i}px;
}
}
Compiled CSS:
.MarginTop-0 {
margin-top: 0px; }
.MarginTop-1 {
margin-top: 1px; }
.MarginTop-2 {
margin-top: 2px; }
.MarginTop-3 {
margin-top: 3px; }
.MarginTop-4 {
margin-top: 4px; }
Not sure of the utility of this, but...
Sass:
#mixin marginTop($amount) {
.marginTop-#{$amount} {
margin-top: unquote($amount + 'px');
}
}
#include marginTop(1);
#include marginTop(100);
Compiled CSS:
.marginTop-1 {
margin-top: 1px;
}
.marginTop-100 {
margin-top: 100px;
}
I am used to coding in SCSS but pretty new to LESS.
I have the following code in SCSS but would like to know how to write this in LESS.
Here is the SCSS code...
#mixin posL($property, $value) {
{$property}: $value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
#include posL(left, 100px);
}
So far I have something like this in LESS but I have to declare selectors...
.posL(#property: 100px, #value: 2px) {
left: #property;
-rtl-left: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(200px);
}
Is there a better way to write my LESS code so the selectors in the mixin remain generic (not specified)?
Update for LESS 1.6+
It is almost a direct mapping now with the 1.6 update, like so:
LESS
.posL(#property, #value) {
#{property}: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
CSS Output
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}
Original Answer (pre 1.6)
There is currently no real way to do dynamic property names in LESS (whether for prefixing or for full property names ,like you want), though there is discussion about it.
I recommend a generic mixin with a nested, guarded mixin for the logic. This still gives you selection to specific properties, but does require some more explicit code to set it up. Something like:
.posL(#property, #value) {
.getProp(left) {
left: #value;
}
.getProp(-rtl-left) {
-rtl-left: #value;
}
.getProp(#property);
}
Then use it very similar to how you do the SASS version:
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
Compiles to:
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}