I am practising tailwind scss, and trying to create a theme similar to bootstrap. My current code for primary button, below which is working fine.
.btn-{
&primary{
#apply bg-blue-500 text-white;
&:disabled{
#apply bg-blue-500/50;
}
}
and my alert is
.alert-{
&primary{
#apply bg-blue-500 text-white;
}
As bg-blue-500 is taken as primary color, i prefer to variable.scss file like
$bg-primary: #apply bg-blue-500; //throws error at scss
I dont want to hardcode the color, instead use the tailwind values. Is there a way to achieve this
Related
I have a page that has a bunch of Section tags in it and I have a my-5 class on each one. Rather than repeating that every time I'd love to see if I could use a Sass Mixin to apply the my-5 css automatically to the Section tag so I could simply turn this
<section class="my-5">
into this
<section>
You would use SASS #extend inside the section rule...
section {
#extend .my-5;
}
https://www.codeply.com/go/6ziZAFqFJj
I'm extracting a helper component by using tailwind utilities and tailwind directives, but when I tried to #apply text-md to a component I get this error:
#apply cannot be used with .text-md because .text-md either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc
.
image of code on error situation
result without .text-md utilityimage of code on error situation
Now, What should I do to solve it?
That is because by default there is no class .text-md.
I want to customize Bulma.
I read the document https://bulma.io/documentation/overview/customize/
but I cannot understand.
npm install bulma
cd node_modules/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
pasted Set your variables code and save named bulma.sass
npm run build-sass
and build error.
please teach me how to ?
First, the best way is not to change the node_module's file content.
The simplest way is to create custom scss file and include Bulma SCSS into it.
#charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
#import "~bulma"; // or fallow the partial import example from docs.
// add custom css here.
Maybe this is the page you need.
Otherwise, if you've installed sass you might choose to follow this step: I'm no npm expert so I chose to download Bulma, create a custom .sass file and let sass generate my css. This path is explained here: https://bulma.io/documentation/customize/with-sass-cli/
This may be bad form but if you write your own css in the html file, you can add !important to override the bulma colors.
i.e. if there's a button color you don't like such as is-primary you can do background-color: blue !important.
Just try not to use !important all over the place.
The better solution would be to download sass -- but I can't help with that. The other answer should help?
I discover that if you set an id="for-example" for a div and then you go to your styles.scss you can create a new class for that id.div like this:
#for-example {
background-color: blue;
}
I don't know if is a bad practice but it works for me!
I have a styles.scss and a partial that holds some color variables _colors.scss.
_colors.scss:
$primary: #009688;
$secondary: #4caf50;
styles.scss:
#import 'colors';
.blurred {
color: $primary;
filter: blur(2px);
}
This works, but I would like to be able to have intellisense for the $primary variable, just as if it was declared in styles.scss. Is there a feature/extension available for VS code that can do this?
Install SCSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss
Image source
There is no color preview though https://github.com/mrmlnc/vscode-scss/issues/13
because vscode doesn't support this yet and there is no plan to add it https://github.com/mrmlnc/vscode-scss/issues/29
I can't seem to add my own CSS file to the CKEditor. I'm downloading a custom version 4.5.8 and include the "StyleSheet Parser" plugin. The "Styles" list has the default styles, but not the ones from my css file.
This the code:
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The editor is loaded successfully, but the "Styles" list does not contain my styles. The location of my css files seems right, when I try other paths I get an error.
This is my test.css:
.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
Already tried clearing my browsers cache. I tried it in multiple browsers.
I tried one other thing: download the StyleSheet Parser separately, put it in the plugins folder, and use the following code:
CKEDITOR.config.extraPlugins = 'stylesheetparser';
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The "Styles" list is still not showing my style, but when I edit the source code and put my style in like this, the style is applied to the text in the editor(!):
<p class="testStyle">Test text</p>
Sources:
- CKEditor docs for the StyleSheet Parser
- The "contentsCss" option docs
The Styles in CKEditor require an element, so the StyleSheetParser only recognizes rules that include an element and a class name.
You should change your CSS to
p.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}