Questions tagged [sass]

Sass is a CSS preprocessor which enables advanced features not available in normal CSS.

Filter by
Sorted by
Tagged with
1 vote
0 answers
59 views

DOM manipulating that I called Framework

I'm building a framework like this that can turn SASS-like code into CSS, a template engine like Mustache, a DOM manipulator like React, and a router to add a single page app, and I'm having a ...
ahmed qoreichi's user avatar
3 votes
2 answers
203 views

Prey Throbber using CSS Animation

I'm migrating to web development and wanted to learn CSS animations better. I was playing Prey last night and realized the "throbber" on the elevator screen would be interesting to ...
Carcigenicate's user avatar
6 votes
1 answer
210 views

Small Bayes Calculator to learn Javascript

I am trying to learn UI design so I threw together a Bayes Calculator (i.e. calculate the posterior probability of being sick given a positive/negative test result using the specificity, sensitivity ...
Felix B.'s user avatar
  • 163
2 votes
0 answers
66 views

A simple recipe page in HTML, SASS and JS

I've been learning how to design responsive webpages. I got done the basics and can create code that closely resembles the design, but I was wondering what are the best practices in web development ...
smanna's user avatar
  • 121
3 votes
0 answers
63 views

Travel agent website

I've created a travel agent website, I would like to know how can I improve, DRY my code and how to increase performance - I tinified img's but the bottom one I've made in PS takes much time to load. ...
fluffy's user avatar
  • 377
0 votes
1 answer
287 views

Christmas tree made up only with HTML and CSS

I've created a Christmas tree using only HTML and CSS. It's pretty sure that the code can be written in a more efficient way. Also, the lights are turning on and off at the same time, is there a way ...
Leo Messi's user avatar
  • 181
2 votes
3 answers
197 views

Task-list app, which allows to add and remove tasks from list

I wrote my first web app. Please let me know what I should improve. I want to write as clean code as possible. App is about adding and removing tasks from list. Backend is written in Django, frontend ...
Damian Tułacz's user avatar
1 vote
1 answer
35 views

Is there a more dynamic way to target siblings in CSS / SCSS?

The code I'm working on looks like this - All the way up to 50... (Not ideal) There can be anywhere from 1 to 100 anchor/div combinations, but more often than not in single digits so there's almost ...
Nick's user avatar
  • 141
2 votes
0 answers
39 views

Utility classes to control word breaks

I want to know if my SCSS code looks correct. Note: Everything works as I expected. The Main Idea of this code is to generate Word Break Utilities for controlling word breaks in an element. using SCSS ...
HoussamDev's user avatar
1 vote
0 answers
185 views

Bootstrap container layout system bug

As is known, the .container- class in Bootstrap 4.x.x and 5-alpha has an bug in intermediate classes. To give a little more detail, The ...
l6ls's user avatar
  • 111
3 votes
1 answer
80 views

Simple website made for learning purposes

Hello I've just finished coding one of my first websites. And I would love some feedback. I know that I really need to improve my design and improve my code and for that I need some tips from you guys ...
fluffy's user avatar
  • 377
-1 votes
1 answer
34 views

Does this SASS make sense?

I'm trying to automate the CSS I write by developing SASS files I can reuse. I want to create a utility SASS file for padding and came up with the following. ...
Neil Meyer's user avatar
4 votes
1 answer
84 views

Keyframes animation

Is there a way I could simplify this with Sass or JS? It works, but it's not what I'd call 'DRY' code. An alternate form I've tried is a Sass for loop but can't get ...
Daniel_Knights's user avatar
1 vote
0 answers
52 views

How to increase scalability the method that output each file while switching multiple many conditions? [closed]

I have a common style (common.scss) and a text direction (RTL, LTR) option file (option-document-direction-rtl.scss, ...
stealegi's user avatar
4 votes
1 answer
65 views

Compile SASS files in a directory via Gulp.js tasks, one of which produces logging output

If the default task is executed here, the file name to be compiled is passed to the argument of the CompileSass function. When ...
alihasan's user avatar
6 votes
1 answer
389 views

Resizable split DIVs Vue.js

I just started Developing Web App (Vue.js) for my company for around 1-2 months. Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow. I've created a custom resizable ...
Muhammad Azizi Abdul Aziz's user avatar
1 vote
0 answers
78 views

Sass mixins vs Angular layout components [closed]

For a long time I've been using Angular "Layout" components so their role is basically to define layout, like padding, margin, fonts and so on. For instance, page header component: ...
Vova Bilyachat's user avatar
1 vote
2 answers
65 views

Using CSS grid to align content in a non responsive div

My job is to supervise a junior developer, but I am mainly a javascript developer and my CSS skills are a bit basic. However, I spotted some things in his CSS code that seem unorthodox to me. He ...
ealef's user avatar
  • 153
1 vote
0 answers
64 views

HTML5 Custom Audio Player with SASS

i made an audio player in html5 for learning purposes, also i tried to use BEM pattern with sass (i dont know if i did it well) i also encapsuled my code as much as possible, but i think i can make it ...
Oliver Lluberes's user avatar
1 vote
0 answers
89 views

Sliding marker on link hover and click with jQuery

The code I'm bringing forward is for a vertical menu, where I needed a marker to do the following: When hovering over a link the marker should slide down next to it. When not hovering over a link the ...
Alberto Burrito's user avatar
3 votes
1 answer
60 views

Sass styling with React components

I have put together a piece of what can be a much larger frontend in Reactjs. I just put together the component that renders to the user a list of airports and hotels as well as a header component. ...
Daniel's user avatar
  • 165
2 votes
1 answer
122 views

React board game app

I was told to code a board game app using React for a job interview. They told me they chose other candidates to move forward with, so I was wondering on what I could improve. The full code can be ...
Jorayen's user avatar
  • 141
2 votes
1 answer
95 views

Rendering three vertical dots using SCSS

I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the ...
T. Dirks's user avatar
  • 123
5 votes
0 answers
91 views

SASS script to generate Pygments / Rogue stylesheet output

I've written some SASS code to generate a Pygments syntax highlighter style sheet (which are, by extension, compatible with Rouge). Such a stylesheet is normally generated by the ...
Martijn Pieters's user avatar
2 votes
1 answer
44 views

Different color classes that control the same stuff

I have this code... ...
Smokey Dawson's user avatar
2 votes
2 answers
869 views

SASS mixin for a font-awesome before/after usage

In my SASS I use font-awesome declarations all over the place. I'm in love with it. I've created a SASS mixin for the usage: I started with the following: ...
Zach Smith's user avatar
10 votes
1 answer
536 views

Lightweight Angular tooltip component

I made a small Popup component to show different error/success...etc. messages. Template: ...
Embrioka's user avatar
  • 313
2 votes
0 answers
302 views

Compiles SCSS Code to CSS in the browser

First of all, thanks for reviewing my code. I am half-way done through a GitHub Project I call ScriptSass, that parses SCSS Code using Javascript into regular CSS. Now, I have reluctantly added an ...
Roy's user avatar
  • 21
1 vote
0 answers
1k views

Sass Collapsible sidebar in Bootstrap 4

I am creating a static site in HTML and CSS. I'm using Sass for the CSS. The whole repository can be found here on Bitbucket. I wanted feedback on the way I've done the sidebar. The code is split ...
J86's user avatar
  • 424
3 votes
0 answers
286 views

CSS animation of ravens flying in a circle

I just made a little experiment on codepen with this animation. But I get some performance issues: sometimes it's not as smooth as it should be. Does someone know some practice I could use to ...
GordonFreeman's user avatar
2 votes
1 answer
483 views

SASS/SCSS mixin for button states

I have created several mixins for a button to attempt to reduce duplication and contribute to the overall improvement of performance. I am looking for guidance on how to tighten this up so it is as ...
JayCray's user avatar
  • 21
1 vote
0 answers
234 views

Animated Ticker with JavaScript and Sass CSS

I've made this animation using JavaScript and Sass CSS. Relevant is the code inside the IIFE. Because that's what I like to keep and develop further. Perhaps use it for future projects. Everything ...
michael.zech's user avatar
  • 4,146
1 vote
1 answer
123 views

Website using HTML/CSS/SASS/Bootstrap/JQuery

I'm learning Sass and responsive websites, I've made this simple portfolio website with the help of a bootstrap template (freelancer) and I'd like to know if I'm doing SASS correctly and ways to ...
user avatar
0 votes
2 answers
125 views

Simple SASS & BEM module for social feed widgets

I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity). I am coding ...
daniel aagentah's user avatar
1 vote
1 answer
85 views

Control element with JavaScript and SASS: move options between two select-elements

Who has to use enterprise software like for example Microsoft Access knows that control: There a two select lists. The one list offers possible options. With a button you can add one or multiple ...
michael.zech's user avatar
  • 4,146
3 votes
0 answers
51 views

Polyfill for a legacy system: Attach "labels" to their corresponding checkboxes

I had to do some maintenance programming on a legacy software recently. Most of the system's logic is done with Java and PL SQL. The Java creates some special kind of XML. These XML is then ...
michael.zech's user avatar
  • 4,146
2 votes
0 answers
64 views

jQuery Mobile Menu plugin

I would like some opinions on this Mobile Menu plugin I wrote for work. We develop custom WordPress themes, nothing too advanced or anything. I would like if anyone could just take a look and provide ...
bebaps's user avatar
  • 21
0 votes
0 answers
166 views

Line Graph animation with SVG and ES6 template strings

I've made this animation which shall be incorporated in the header of a webpage. Demo with compiled Sass and uncompiled ES6 code: ...
michael.zech's user avatar
  • 4,146
1 vote
1 answer
2k views

"Spinning wheels" - Animated spinner with SVG and Sass-CSS

I've made this little animation using SVG, CSS-keyframes and a bit of Sass. ...
michael.zech's user avatar
  • 4,146
1 vote
1 answer
460 views

"Star Field" Animation with JavaScript and Sass-CSS

I've have make this animation on the weekend as a "just for fun" thing. And for to play with various techniques I've seen in others code. I think it works quite alright. Nevertheless I would ...
michael.zech's user avatar
  • 4,146
1 vote
1 answer
2k views

Responsive SASS header

I'm currently working on an header for some homepage. It should be responsive. When enough width is available a floating header is displayed (logo on the left / menu on the right). With less and less ...
user avatar
2 votes
1 answer
15k views

React beginner exercise: Build a base arithmetic calculator

Exercise assignment: Build a calculator with React which can add, subtract, multiply and divide. See image below for reference Give it whatever design and colors you want Each text ...
michael.zech's user avatar
  • 4,146
6 votes
3 answers
1k views

Toggle menu under specified screen width

I've created a simple toggle menu in jQuery, which is capable of specifying a breakpoint, but I'm afraid my code is too complicated. How can I make it simpler? I also have a question about ...
kr099's user avatar
  • 151
2 votes
0 answers
42 views

Styling different icon positions in boxes with Sass

I've been learning Sass recently and I've made a small project to master key concepts. I've tried to use placeholder to make different styles of boxes. I have a few questions: is the project ...
kr099's user avatar
  • 151
3 votes
2 answers
11k views

Tooltip-overlay following the mouse pointer

The purpose is to attach a tooltip-element to arbitrary HTML-elements. The tooltip appears when the user hovers an element. Follows the mouse-pointer while moving over the element. ...
michael.zech's user avatar
  • 4,146
1 vote
0 answers
494 views

Use checkbox to display side menu with only CSS

I am trying to improve a website to be as accessible as possible to screen readers and people who want to disable JavaScript (not necessarily both at the same time) so I use a checkbox with a label to ...
Tony Brix's user avatar
  • 111
1 vote
1 answer
51 views

Showing the current view-position within the web page

I've made this coding for large web pages with lots of text, images etc. If the user scrolls down or up it shows where the current view approximately is. In relation to the overall document height. I'...
michael.zech's user avatar
  • 4,146
1 vote
0 answers
573 views

"Moving gradient"-animation with CSS-keyframes and Sass

I've made this animation using Sass and CSS-keyframes. I'm bit worried about my usage of position relative / absolute. Can one expect that it works in all browser reliable? Or to I have to expect ...
michael.zech's user avatar
  • 4,146
0 votes
1 answer
74 views

Excerpt from a grocery shopping site using SASS [closed]

I am a UI/UX designer. I am working on the HTML of a website, using Sass/scss+bootstrap 3 project. It's my first project in sass/scss. Now my developer's feedback is: HTML code is not up to mark. ...
Sharanpreet's user avatar
0 votes
1 answer
39 views

HTML-formular with animated input-elements

The idea is to improve the usage of larger formulars. Done by adding a little animation to the input-elments. When one of the textboxes is clicked or focussed via tab appears a colored border. ...
michael.zech's user avatar
  • 4,146