Most voted "scss" questions
52 questions
Sort by count of
-
13
votes3
answers10018
viewsSASS and SCSS: Why use them instead of conventional CSS?
I hear a lot about SASS and SCSS, but I don’t know exactly how these tools work. I just know they are CSS generators(?). I found a related question here but it doesn’t address the question of why…
-
10
votes1
answer1138
viewsWhy does Bootstrap 4 use "rem" and "em" instead of pixels?
As you can see here and here, Bootstrap 4 uses the drives rem and em instead of using in px. Code snippet using the unit rem: $display1-size: 6rem !default; $display2-size: 5.5rem !default;…
-
5
votes2
answers76
viewsInsert a background inside a triangle in the corner of a div
I’m developing an angle portfolio, but I have a question about SCSS. I was interested in creating something that I don’t usually see much in portfolios, insert the portfolio background only in the…
-
4
votes1
answer44
viewsWhat is the correct way to use the "%" operator in Sass?
I’m making changes to a page that was made using Sass, and I’m still very beginner with the framework, and I came across the following code: %cf { &:after { content: ''; display: block; clear:…
-
3
votes1
answer195
viewsReturn element to initial position in Hover css
I am making an animation in a logo, where each letter goes to one side and when I pass the mouse in the div where it is, all the letters must return to the initial value, thus forming the logo. So…
-
2
votes2
answers2550
viewsProblem implementing icone from font awesome by css
I have a problem loading my font via css I’m using the font awesome 5 I’m implementing the icons via content in the css but the icon I want to use is not working this would be the link of the icon I…
-
2
votes1
answer72
viewsMedia queries not applying the css according to device width
I’m trying to create a responsive layout. Some elements he’s applying css as quoted in media queries, some others are picking up web css. How can I fix it to get the corresponding css of what I…
-
2
votes1
answer55
viewsAnimation that reveals element from left to right
I have a <mat-divider></mat-divider> and I need to get it revealed from left to right, as if it were a progress bar being filled Does anyone have an example to introduce me? I could only…
-
2
votes0
answers67
viewsNot loaded server style in Node.js application
I have a question. I’m using the github pages to develop a website using Node.js. In my host, styles load and I can view them normally in the browser. However, when I try to see the application to…
-
2
votes1
answer1642
viewsHow to make this transition effect using CSS?
How to make a transition with pure CSS, and in the final transition layout I will have 2 boxes on the left side. The transition: When loading the page, you will only have one box with evaluation…
-
2
votes0
answers64
viewsMedia Queries to identify notch
Does anyone have a complete solution to identify all the phones that have this "notch" in the existing market versions? Currently I am using these strategies, but I’m still having problems with some…
-
1
votes1
answer276
viewsProblems editing bootstrap variables
I am doing a project and I am using bootstrap 4 with scss I am creating a form using the classes of the framework itself: <form class="form-search"> <div class="input-group"> <input…
-
1
votes1
answer93
viewsProblems with css :not() attribute
I’m having a problem I’m editing a h2with css and within that h2 has a span but wanted to apply the style in h2but I don’t want style to apply to my span I’m using the selector :not(span) but it…
-
1
votes1
answer407
viewsPage does not load SCSS file
I’m learning web development and started messing with SCSS in a layout but the browser is not pulling the same. It is being called along with the CSS that is working normally on the page. <link…
-
1
votes0
answers190
viewsI can’t insert icon inside an image with after or before
I need to implement a icone in the :after of this field of radio because I want it to look like the picture I managed to insert the css normal I’m just not able to implement the icon that would be…
-
1
votes1
answer86
viewscreate variable with @for in scss
Good morning to all!! Guys I need to create color variables in SCSS and I’m doing it as follows: @for $i from 1 to 50{ $corClara{$i}:red; } but I can’t make it work...Koala, when compiling, always…
-
1
votes0
answers25
viewsError in using @extends using Sass placeholders
@each $direction in $directions { %u-no-padding-#{$direction}{padding-#{direction}: 0;} %u-half-padding-#{$direction}{padding-#{direction}: $layout-module-size / 2;}…
-
1
votes1
answer40
viewsHow to make an automatic grid for exact measurements using SCSS?
I have the following example but in percentage: $grid__cols: 12; @for $i from 1 through $grid__cols { .col-#{$i} { flex-basis: (100 / ($grid__cols / $i) ) * 1%; } } That may be tested here, to…
-
1
votes1
answer111
viewsError BOOTSTRAP SASS _is not a color for `Darken'
This error returns when I sort these @import files in my app.scss, using SASS/[email protected] on a Mac. I need to understand where the error is, if by reversing the order (custom variables at the…
-
1
votes1
answer538
viewsAwesome font icon 5 does not appear when called by css
Personal am using fontawesome 5 and some icons do not appear when I call them by css follows my code and screen print of how the icone is being displayed. HTML: <link rel="stylesheet"…
-
1
votes1
answer89
viewsSafari bug of a CSS animation with keyframes
In safari Version 12.1 (14607.1.40.1.4), a bug occurs, the effect happens, but gives a strange error, the element that suffered the event seems to recede, the initial position of the translate3d,…
-
1
votes1
answer406
viewsDropdown in vertical menu with bootstrap 4
I need to make a vertical menu following this layout but I’m having difficulties to make the menu open one dropdown I’m using bootstrap 4 follows my code + the layout image of how it should look.…
-
1
votes1
answer60
viewsSASS: Are there any features to avoid repetitions and lines of code color variations?
Problem situation I am creating a palette of colors that vary a lot in their references, being 10% of the base color down. For example: $primary: #0069FF; A 10% subtraction of this value is:…
-
1
votes0
answers39
viewsStyle input[type=checkbox] containing only part of input id
I have a style in CSS like this: input[type="checkbox"] { box-shadow:none; background-color: #f5f5f5; } I wanted to put in a checkbox who has a id special: <input type='checkbox' id='check_" +…
-
1
votes0
answers24
viewsI can’t find a way to remove spacing from my CSS
I recently returned to trying to develop my learning in Web Development and tried to develop an online curriculum to eventually work in the area. As I’m not very good at CSS yet, I downloaded a…
-
1
votes1
answer232
viewsUse Sass bootstrap semantically and selectively
When it comes to Sass and Bootstrap the recommendation/advantage that is most around is, "import only what you will use, so your final css will be smaller and will contain only the bootstrap parts…
-
1
votes1
answer47
viewsAlignment of Text to Input
Good evening, everyone, I hope you’re all right. I’m having trouble aligning Text on top of Input. HTML <div class="form-group2 col-md-4"> <label for="inputState">Estado</label>…
-
1
votes1
answer22
viewsbackground-size: cover. Is there any way to add a percentage value?
I want to add an Event Hover that slightly increases the size of the image I’m using from the background, but to keep it responsive accurate background-size:cover. follows an excerpt of code made…
-
0
votes1
answer57
viewsInclude de css in Ionic
I need to call a css block, depending on the condition, in an Ionic view. I’m trying to do with ng-include, but it doesn’t work. <style type="text/css"…
-
0
votes1
answer77
viewsDynamic background image
I have a list of products, clicking on some of them, redirects to another page showing only the content of this item. I receive the Image, but I would like it to be in the background, that is, it…
-
0
votes2
answers59
viewsTop calculation on scss
I have a container that has a variable height, depending on the computer resolution. I need to calculate when top should use so that the content is centralized. I tried something like: .container {…
-
0
votes1
answer239
viewsBackground color angular
How do, in angular 7, a background-color of the body different from the page I’m displaying? Example: Login page: green background Home: blue background
-
0
votes0
answers29
viewsTablet CSS in Ionic 4
Good afternoon, How can I make a css for mobile and tablet? I need to separate, prq on a given screen the menu should be presented and other not.
-
0
votes1
answer226
viewsHow to access the Styles.scss file from within an Angular component
I am working with Angular (project generated by @angular/cli), and the structure of my project is below: src | - app | - foo | - foo.component.js | - foo.component.scss | - foo.component.html | -…
-
0
votes1
answer95
viewsPrevent the pseudo element ::before from receiving the effects of Hover applied to its parent
Hello, I’m applying Hover to an element, and this one contains a pseudo element before, in which it is receiving the effects of Hover of his parent element. This image shows the problem: Note that…
-
0
votes1
answer61
viewsDIV lose alignment if it is with a number of different lines
I’m trying to line up some divs but I realized that when the div that’s on the other side is not with the same line number on <p> it simply loses alignment, I am developing in Laravel using…
-
0
votes0
answers31
viewsTranspose in development or build only
I need to transpose a project because it uses scss, typescript and Es6 The correct thing is to make the Bundle only for the build or I can/should run a task every time I change the code? I would…
-
0
votes1
answer68
viewsLoad scss from js file
I am working on a static website, where I have the following directory structure: / /src exemplo.scss exemplo.js index.html webpack.config.js In my exemplo.js i give a require('exemplo.scss'), which…
-
0
votes0
answers16
views -
0
votes2
answers369
viewsCenter an element with position Absolute
I’m trying to center a button on my card. I’d like to get that result: need to be with position Absolute because the other cards sometimes have larger description and the "See details" button gets…
-
0
votes1
answer47
views -
0
votes1
answer270
viewsAngular 12, i18n scss fault
I’m trying to use a template I bought with internationalization, but I’m having problems when running the command ng server --conficuration=pt simply get errors in scss and Less files: ng serve…
-
0
votes1
answer639
viewsUse position Absolute to always leave element at the bottom but without overlapping another element
Currently I have a sidenav made with Angular Material. I have a list with menu and submenus, and at the end I have a logo. My problem is that when all the menus inside my sidenav are opened, they…
-
0
votes1
answer98
viewsHow to create a variable array with scss in VS community
Good morning, I have a project on Ionic and in it I can configure a series of variables $colors: ( /*-CINZA: */ cinza1: #595959, cinza2: #7F7F7F, cinza3: #A5A5A5, cinza4: #CBCBCB, cinza5: #F1F1F1,…
-
0
votes1
answer55
viewsElements of a Timeline Breaking Line
all right? I’m trying to make a Timeline with scroll, but I’m not getting the Timeline elements into the div when it reaches the maximum size, so that this part is not visible. Here is the code I…
-
0
votes0
answers29
viewsHow to use overlay in a dialog inside a window in Kendo UI?
I currently use the Kendo Ui Angular I am currently trying to use inside a window a component that calls a dialog, but my dialog is not applying the overlay opacity effect, currently having this…
-
0
votes0
answers27
views -
0
votes0
answers23
viewsBootstrap doesn’t matter in Vs Code. Why? - UPDATE
Hello, I used the command, inside SCSS, @import 'bootstrap-4.3.1'; But, it didn’t work. I actually used also this below (none worked): @import 'bootstrap-5.1.0'; @import…
-
-1
votes2
answers58
viewsChange background VIDEO by screen size?
How to use different background video by screen size , Desktop would be a <video> Mobile would be another <video> Design in Angular .. <video playsinline="playsinline"…
-
-1
votes1
answer79
viewsConvert percentage to real in the input Rage slider Html5
I need to convert mine input range of percentage to dinheiro and the minimum value shall be R$170,00 and the maximum R$ 5.000,00 I tried to touch the script to convert but it keeps giving error…