I am using SCSS in my sveltekit +layout.svelte file to create a global stylesheet. I couldn't find a built-in way to make a global stylesheet so I resorted to just using :global(). This is the code I used:
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&.dropcap::first-letter {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
(note: :where() is used because :global() doesn't support multiple selectors)
The first rule of &:not works fine, but the second rule of &.dropcap shows a warning in the terminal of unused selector (the only content that will match it would go in the <slot /> of layout) and it gets removed from the css output. When I use &:global(.dropcap) svelte also includes the second :global() in the css output. How do I make svelte not remove the css?
The :global() might not propagate inward, you may have to add it everywhere.
For global stylesheets it usually is easier to import them in the <script> along the lines of:
import '../styles/sheet.scss';
This requires the build to be set up to handle such imports, SvelteKit uses Vite which should be able to do this by default.
For some reason, wrapping the problematic selector with :where made the warning goes away (and works).
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&:where(.dropcap::first-letter) {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
Searched but can't find an answer..
I have an element which gets generated (by an external platform) with the following classes: p-button and button.
Now the SCSS is like this:
.p-button {
&.button {
margin: 10px;
}
}
But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:
.p-button {
& {
#include button-appearance("button") {
margin: 10px;
}
}
}
But that doesn't work (puts a space between it). You can't do this:
.p-button {
&#include button-appearance("button") {
margin: 10px;
}
}
Anyone have a clue?
EDIT: Here is the mixin
#mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
#if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
#include normalized-background-image($background-image);
#include show($show);
background-color: $background-color;
background-position: $background-position;
}
#content;
}
EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
Everyone, finally found the solution. I just removed the &.button from the .p-button mixin include and now it works:
#include button-appearance ("button") { *styles* }
#include button-appearance () { *styles* }
Edited the answer after the original question was edited adding the used and un modifiable mixin
The original mixin does not append the ‘#content’ passed to the mixin to the generated selector. So if you cannot modify the original mixin, the only way is to add your properties outside the mixin. According to the mixin the selector will match a predefined ‘$button-selector’ variable, so it won’t use your class.
So, if you want to use the same class defined in ‘$button-class’, try the following:
#{$button-selector}.button {
margin: 10px;
}
Will output:
.p-button.button {
margin: 10px;
}
I'm having a weird problem with #extend on scss. when i extend some %placeholder that have repetitive properties, the gulp-clean-css merge them, and I don't want that to happen.
Here's an example:
foo.scss
%one {
font-size: 16px;
width: 95%;
}
%two {
font-size: 1rem;
width: calc(100% - 10px);
}
.foo {
#extend %one;
#extend %two;
}
.foo2 {
font-size: 16px;
font-size: 1rem;
}
foo.min.css
.foo{font-size:1rem;width:calc(100% - 10px);}
.foo2{font-size:16px;font-size:1rem}
Why does this happen?
If it helps, this is mine gulp-task:
gulp.task('scss', function(){
console.log('start task scss');
gulp.src(folderStyles)
.pipe(sass.sync().on('error', sass.logError))
.pipe(rename({ suffix: '.min' }))
.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))
.pipe(gulp.dest(folderStyles));
logEnv();
});
Is there any other better plugin to use?
I don't want it to remove duplicated properties. If you ask me why, it's because of old browsers support than might not support rem or calc, or other "new fancy propertie" ;)
Thank you :)
I played around with this, and I think your setting is incorrect for 'noAdvanced':
Instead of:
.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))
Use:
.pipe(cleanCSS({compatibility: 'ie9', advanced: false}))
According to the docs:
advanced - set to false to disable advanced optimizations - selector &
property merging, reduction, etc.
https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
This isn't going to leave you with 1 .foo selector with two font-size declarations tho, it's just not going to merge the two, so you'll end up having:
.foo {
font-size:16px;
width:95%
}
.foo {
font-size:1rem;
width:calc(100% - 10px)
}
.foo2{
font-size:16px;
font-size:1rem
}
This answers your issue however kind of defeats the purpose of using something like clean-css. I'm curious as to why you would want to leave both font-size declarations in your CSS when the first one will be overridden anyway.
I have a SCSS file with the following
input{
&[type="text"],
&[type="search"]{
margin: 0 0.5em;
}
}
which works as expected. I would also like a textarea to have the same CSS. Does SCSS have a selector that will allow me to place textarea with the
&[type="text"], &[type="search"]
in the SCSS file but not place the 'input' parent before textarea. The output I'm trying to achieve is as follows
input[type="text"], input[type="search"], textarea {
margin: 0 0.5em;
}
I know I could do this with a mixin however I was thought this feature was added to SCSS.
#extend works really great in these situations. % is good as a way of implying that this class will only ever be extended.
%baseClass{
margin: 0 0.5em;
}
input{
&[type="text"],
&[type="search"]{
#extend %baseClass;
}
}
textarea{
#extend %baseClass;
}
No, you cannot. For a lengthy selector, The best you can do is set it as a variable and use that.
$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');
#{$form-input-text} {
// styles;
}
#{$form-input-text}, textarea {
// styles
}
I'm new to Sass so I need help with the creation of a mixing for my input fields.
However, if anyone knows of an already made mixin for this or if Compass has one that accomplishes this, please let me (us) know.
I currently have the following CSS rules in my .scss file:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select { ... }
input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
Now, as we know HTML5 provides a nice new set of input types, but right now I don't need to add input types like date, month or week, that's why I don't have them listed "yet".
So in the case I need to add them in the future, I'll update that list you see above.
However, my problem is that I feel I'm repeating myself all over here, plus, the work of selecting items, copying, pasting and editing every time for every new input type I add to the list is just plain dumb and I almost sure Sass' mixins can be of help with this. The problem is that creating a mixin for this is honestly very confusing to me.
I've looked around here and the web for something similar but haven't been able to find anything.
Any help with this is greatly appreciated.
Ok, I eventually found the Sass mixing library Bourbon.
They have an 'add-on' for HTML5 input types (here's a link to the .scss file they created), but it doesn't have the :hover or :focus pseudo elements. So I added them.
I honestly don't know if what I did is the best way to write this mixin, but the thing works marvelously:
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$unquoted-inputs-list: ();
#each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
// :hover and :focus pseudo elements
// Added by Ricardo Zea
// http://ricardozea.net
// #ricardozea
// Tracking: http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields
$inputs-list-hf:'input[type="email"]:hover',
'input[type="number"]:hover',
'input[type="password"]:hover',
'input[type="search"]:hover',
'input[type="tel"]:hover',
'input[type="text"]:hover',
'input[type="url"]:hover',
'input[type="color"]:hover',
'input[type="date"]:hover',
'input[type="datetime"]:hover',
'input[type="datetime-local"]:hover',
'input[type="month"]:hover',
'input[type="time"]:hover',
'input[type="week"]:hover',
'input[type="email"]:focus',
'input[type="number"]:focus',
'input[type="password"]:focus',
'input[type="search"]:focus',
'input[type="tel"]:focus',
'input[type="text"]:focus',
'input[type="url"]:focus',
'input[type="color"]:focus',
'input[type="date"]:focus',
'input[type="datetime"]:focus',
'input[type="datetime-local"]:focus',
'input[type="month"]:focus',
'input[type="time"]:focus',
'input[type="week"]:focus';
$unquoted-inputs-list-hf: ();
#each $input-type-hf in $inputs-list-hf {
$unquoted-inputs-list-hf: append($unquoted-inputs-list-hf, unquote($input-type-hf), comma);
}
$all-text-inputs-hf: $unquoted-inputs-list-hf;
// You must use interpolation on the variable:
// #{$all-text-inputs-hf}
//************************************************************************//
// #{$all-text-inputs-hf}, textarea {
// border: 1px solid red;
// }
As you can see I copied and pasted the original mixing and added the prefix -hf and of course the :hover and :focus to the new rules.
And in my .scss file I added this #import:
#import "html5-input-types"; (no need for the underline _ or file extension .scss)
And in the 'Forms' section of my .scss file I added these rules:
/*Normal state*/
#{$all-text-inputs},
textarea,
select { ... }
/*:hover and :focus states*/
#{$all-text-inputs-hf},
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
I know I have textarea and select outside the mixin file (html5-input-types.scss), not sure yet if I'm including them in it or not, gotta think about it.
Anyway, this worked for me pretty well and although I will still need to update the html5-input-types.scss if anything changes in the future, at least I'm handling these input fields way more efficiently than before.
Hopefully what I did here helps someone else.
And if any of you has a suggestion to improve the mixin, by all means let me (us) know.
Thanks.
In case anyone comes across this for the same reason I did. Why not let SASS do the work?
CodePen
$form-background: #f8f8f8;
$form-color: #000;
$form-border: 1px solid lighten($form-color, 50%);
$form-focus-background: darken($form-background, 10%);
$form-focus-color: #999;
$form-focus-border: 1px solid $form-color;
%input-styles {
width: 15em;
min-height: 30px;
margin: 0 0 15px 15px;
background: $form-background;
color: $form-color;
border: $form-border;
transition: .2s ease-in-out;
transition-property: color, background-color, border;
}
%input-styles--focus {
background-color: $form-focus-background;
color: $form-focus-color;
border: $form-focus-border;
}
#mixin input-styles($styles, $focus_styles) {
$types: 'email', 'number', 'radio', 'password', 'search', 'tel',
'text', 'url', 'color', 'date', 'datetime',
'datetime-local', 'month', 'time', 'week';
#each $type in $types {
input[type="#{$type}"] {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
select,
textarea {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
#include input-styles('%input-styles', '%input-styles--focus');